Creating a custom interactive mini-site with AI without paid services
Preface
Any follower of creating nocode sites may have a problem: I want to create something, but the service does not have this function, while the service is excellent: good price, extensive functionality, availability of exclusive functions, etc. That is, there is no point in changing to another, but what I want is not there.
This is a story about how I tried to solve this problem and what came of it.
Description of the problem
I use WIX, which is ranked first in many nocode website builder rankings. I have a website that offers various services, the price of which depends on several options, and a discount can be applied to them. Discounts vary: some can be summed up, and some cannot. Bundle purchases are also available, which impose additional discounts.
I want the user to be able to quickly find out the final price with discounts for each product. At the same time, he should be able to see how much he saved on a package purchase and other promotions.
1. Trying options
I took the basic prompt for the initial generation and asked different AIs (free versions at the time) here are the results and my opinion:
Prompt:create a code for the site so that the client can calculate the approximate price of the session taking into account discounts and other options. Add some beautiful design.
Recommended Claude generates the skeleton and styles of the site very well, with the new Artifacts site previewer you can also instantly see the changes without downloading the file. Here is the Artifacts site that turned out: https://claude.site/artifacts/3c60167e-c34f-491c-a476-14d03d8e6508
Here is the code from Claude
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Калькулятор цены сессии</title>
<style>
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f4f4f4;
}
h1 {
color: #2c3e50;
text-align: center;
}
.calculator {
background-color: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
label {
display: block;
margin-bottom: 5px;
color: #2c3e50;
}
input[type="number"], select {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
background-color: #3498db;
color: #fff;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: #2980b9;
}
#result {
margin-top: 20px;
font-weight: bold;
font-size: 18px;
color: #2c3e50;
}
</style>
</head>
<body>
<h1>Калькулятор цены сессии</h1>
<div class="calculator">
<label for="basePrice">Базовая цена сессии (руб):</label>
<input type="number" id="basePrice" min="0" value="1000">
<label for="duration">Длительность сессии (минуты):</label>
<input type="number" id="duration" min="30" step="30" value="60">
<label for="discount">Скидка (%):</label>
<input type="number" id="discount" min="0" max="100" value="0">
<label for="options">Дополнительные опции:</label>
<select id="options" multiple>
<option value="100">Аренда оборудования (+100 руб)</option>
<option value="200">Дополнительный специалист (+200 руб)</option>
<option value="150">Расширенный отчет (+150 руб)</option>
</select>
<button onclick="calculatePrice()">Рассчитать цену</button>
<div id="result"></div>
</div>
<script>
function calculatePrice() {
const basePrice = parseFloat(document.getElementById('basePrice').value);
const duration = parseFloat(document.getElementById('duration').value);
const discount = parseFloat(document.getElementById('discount').value);
const options = Array.from(document.getElementById('options').selectedOptions).map(option => parseFloat(option.value));
let totalPrice = basePrice * (duration / 60);
totalPrice += options.reduce((sum, option) => sum + option, 0);
totalPrice *= (100 - discount) / 100;
document.getElementById('result').textContent = `Итоговая цена: ${totalPrice.toFixed(2)} руб`;
}
</script>
</body>
</html>
What Claude answered me
Of course, I will create the code for a site with a session price calculator, including discounts and additional options. I will also add a beautiful design using HTML, CSS and JavaScript. Here is the code for such an interactive web application:
Session Price Calculator
Click to open website
This code creates a simple, yet functional and stylish website with a session price calculator. Here is a brief description of its features:
The user can enter the base price for the session.
You can select the duration of the session (in 30-minute increments).
It is possible to specify a discount as a percentage.
The user can select additional options that increase the cost.
After clicking the “Calculate price” button, the script calculates the final cost taking into account all parameters.
The design is made in a modern minimalist style using a pleasant color scheme. The site is adaptive and will look good on both desktop and mobile devices.
You can copy this code and save it to a file with the extension .html, then open it in any web browser. If you want to make any changes or add additional features, I will be happy to help you do so.
ChatGPT is very good at making changes to the file and improving the project itself (for example, adding the ability to pull data from the project's JSON file to the HTML file). If you ask from scratch, it simply makes a small example and/or recommends contacting a specialist.
What GPT 4o told me
Here is an example of code for a site where a client can calculate an approximate price for a session, taking into account discounts and additional options. HTML, CSS and JavaScript are used for the design.
HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Session Price Calculator</title>
<link rel="stylesheet" href="https://habr.com/ru/articles/833520/styles.css">
</head>
<body>
<div class="container">
<h1>Session Price Calculator</h1>
<form id="priceForm">
<label for="basePrice">Base Price:</label>
<input type="number" id="basePrice" name="basePrice" required>
<label for="discount">Discount (%):</label>
<input type="number" id="discount" name="discount" required>
<label for="additionalOptions">Additional Options:</label>
<select id="additionalOptions" name="additionalOptions">
<option value="0">None</option>
<option value="20">Option 1 (+$20)</option>
<option value="30">Option 2 (+$30)</option>
<option value="50">Option 3 (+$50)</option>
</select>
<button type="button" onclick="calculatePrice()">Calculate</button>
</form>
<div class="result">
<h2>Estimated Price: <span id="estimatedPrice">$0.00</span></h2>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS (styles.css)
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
form {
display: flex;
flex-direction: column;
}
label {
margin-top: 10px;
}
input, select, button {
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
.result {
text-align: center;
margin-top: 20px;
}
.result h2 {
color: #333;
}JavaScript (script.js)
function calculatePrice() {
const basePrice = parseFloat(document.getElementById('basePrice').value);
const discount = parseFloat(document.getElementById('discount').value);
const additionalOptions = parseFloat(document.getElementById('additionalOptions').value);
if (isNaN(basePrice) || isNaN(discount) || isNaN(additionalOptions)) {
alert('Please enter valid numbers');
return;
}
const discountedPrice = basePrice - (basePrice * (discount / 100));
const estimatedPrice = discountedPrice + additionalOptions;
document.getElementById('estimatedPrice').innerText = $${estimatedPrice.toFixed(2)};
}This code creates a simple page where the user can enter the base price, discount percentage, and select additional options, then click the “Calculate” button to calculate the final cost.
GitHub Copilot is not designed to generate a whole file or make changes that affect the whole file, only small and local changes. If you try to do something global, half of the code is lost. I haven't tried to do it in it, only edited it.
Mistral AI, if asked from scratch, makes just a small example, as in the spoiler below, and at the same time is not designed for convenient use
What Mistral answered me
Creating a full website is beyond the scope of this platform, but I can provide you with a basic structure of how you might approach this using HTML, CSS, and JavaScript.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Session Price Calculator</title>
<link rel="stylesheet" type="text/css" href="https://habr.com/ru/articles/833520/styles.css">
</head>
<body>
<h1>Session Price Calculator</h1>
<form id="priceForm">
Session Duration: <input type="number" id="duration" min="1" required><br>
Discount: <input type="number" id="discount" min="0" max="100"><br>
Additional Options: <input type="number" id="options" min="0"><br>
<input type="button" value="Calculate" onclick="calculatePrice()">
</form>
<p id="result"></p>
<script src="script.js"></script>
</body>
</html>CSS (styles.css):
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f0f0f0;
}
h1 {
text-align: center;
color: #333;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 300px;
margin: 0 auto;
}
input[type="number"] {
width: 100%;
padding: 10px;
margin: 5px 0 10px;
border: 1px solid #ddd;
border-radius: 3px;
}
input[type="button"] {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 3px;
cursor: pointer;
width: 100%;
}
input[type="button"]:hover {
background-color: #45a049;
}
#result {
text-align: center;
font-size: 18px;
margin-top: 20px;
}JavaScript (script.js):
function calculatePrice() {
var duration = document.getElementById('duration').value;
var discount = document.getElementById('discount').value;
var options = document.getElementById('options').value;
var basePrice = duration * 50; // Assuming $50 per hour
var discountAmount = basePrice * (discount / 100);
var optionsPrice = options * 10; // Assuming $10 per option
var totalPrice = basePrice - discountAmount + optionsPrice;
document.getElementById('result').innerHTML = 'Total Price: $' + totalPrice.toFixed(2);
}This is a very basic example and you may want to adjust it according to your needs. This code assumes that each session is $50 per hour, each discount is a percentage of the base price, and each additional option costs $10.
Conclusion: Initial code generation is better done with Claude, then it is better to switch to another, Claude is very forgetful. I decided to switch to ChatGPT 4o, although you can try others
2. I create the site itself
Initial Code Generation (Skeleton Creation) Stage – Claude Omni
I first described my minisite Claude. When I reached the level that I liked the look of, but lacked functionality and Claude was already starting to slow down, forgetting previous functions (at that moment there was only one file with code, where everything was: styles, script and HTML), I switched to ChatGPT 4o.
Improvement and refinement stage – ChatGPT 4o
I copied all the code from the file, at that moment it was working, but it lacked some functions and options. Then I just started asking in ChatGPT what I wanted and it changed it to suit my requirements.
Here are some options for creation that I have tried or that have come to my mind:
HTML only | HTML + JSON | HTML + database (from Microsoft or SQL) | |
Description | Everything in one file: style, script and design | Design, style and script in HTML and data in JSON file | Design, style and script in HTML and data in JSON file |
Who is it suitable for? | To everyone, especially those who want to integrate into an existing site | If you need to create a separate site | If you need to create a separate website, especially on hosting. |
Special requirements | Existing site | Place to stay | Purchased hosting in case of SQL |
pros | All in one file | If you need to change the data on options or add new ones, you don’t need to recreate the entire code. | If you need to change the data on options or add new ones, you don’t have to recreate the entire code, the options are visually visible and it’s easier to add new ones and change existing ones. |
Minuses | During generations, the code is completely recreated, i.e. it takes much longer to do. | Separate file | – |
To take any of the options, or use your own, just tell GPT about it. Or explain what options, conditions, requirements you have and it will show you the best option.
Recommendations when creating code:
Any AI can forget previous prompts in the chat, so always ask it to save all previous edits except for those you ask to change in plain text. Also check each version of the code by eye and in the browser.
If you use ChatGPT, it will regenerate all the code every time you edit it, so it's best to split it into multiple files and ask it to only generate the files it changes. For example, split it into a CSS file, an HTML file, and a JSON data file. If you want to embed this on your site rather than make it standalone, this is not for you.
Describe it precisely and as if for a very lazy programmer who, if you don’t describe it precisely and in detail, will find a way to say that it wasn’t in the technical specifications.
3. I publish the site
Where you publish your site depends on how you made the project and why you made it.
Embed HTML snippet into website | GitHub Pages | Claude Artifacts | Through your own hosting | |
Difficulty level | Short | Average | It couldn't be easier | Difficult |
Who is it suitable for? | When you need it to be a tool on the site, and not a separate site. | Who does not want to pay for hosting and agrees that the site domain is designed as: https://username.github.io/sitename/. It is possible to buy your own domain. | Who doesn't care if the site gets lost and agrees to have the site on someone else's domain with a long link. | Who cares about having a website if security and code inaccessibility are important. |
What do you need | Code and an existing site where you will add it | Have a Github account and a basic understanding of how to work with it. | Claude's account and ask him to create a website. | Buy hosting |
pros | Very fast to insert and update. | Completely free, free domain available, can be edited in the built-in editor. | Instant edits and publishing, 100% free. | You use and support the site yourself, so no one will have access to the closed code. |
Minuses | Since this is just HTML with embedded script and CSS there may be a lack of interactivity. | In the free version of GitHub, files must be public to publish a site. | Long link and foreign domain, the result of generation is published, minor changes cannot be added. | More difficult to update. |
Afterword
I am simply sharing my experience and do not think that my manner is better or worse. I really want to create a universal guide, so I will be grateful for any constructive criticism, feedback on use and specifically described additions. I will add them all (those that are correct) to this post.
