To start, I have made 3 websites which have a focus on frontend devlopment, one of which is linked below:
My clash royale quiz:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clash Royale Player Quiz</title>
<style>
body { font-family: Arial, sans-serif; background-color: #F4F4F4; margin: 0; padding: 20px; color: #333; }
h2, h3, h4 { color: #007BFF; }
#quiz, #result, #viableOptions { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-bottom: 20px; }
.question p, #result p, #viableOptions ul { font-size: 16px; margin-bottom: 15px; }
label { display: block; background: #F9F9F9; border: 1px solid #ddd; padding: 10px 15px; margin-bottom: 10px; cursor: pointer; border-radius: 5px; transition: all 0.3s ease; }
label:hover, button:hover { background-color: #F1F1F1; }
input[type="radio"] { margin-right: 10px; }
button { background-color: #28A745; color: white; border: none; padding: 10px 20px; font-size: 16px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; }
.swapBtn { background-color: #007BFF; padding: 5px 10px; margin-top: 5px; font-size: 14px; color: white; border-radius: 5px; cursor: pointer; display: inline-block; }
.swapBtn:disabled { background-color: #ccc; }
.card-container { display: flex; align-items: center; margin-bottom: 10px; }
.card-image { width: 50px; height: auto; margin-right: 10px; }
</style>
</head>
<body>
<h2>Discover Your Ideal Clash Royale Deck</h2>
<div id="quiz"></div>
<button id="nextBtn">Start Quiz</button>
<div id="result"></div>
<div id="viableOptions"></div>
<script>
var questions = [
{ question: "Choose your favorite card type:", answers: { a: "Offensive (e.g., Hog Rider, Balloon)", b: "Defensive (e.g., Tesla, Tornado)", c: "Support (e.g., Musketeer, Wizard)", d: "Tank (e.g., Golem, Giant)" }},
{ question: "What's your preferred strategy?", answers: { a: "Fast-paced attacks", b: "Control and counter", c: "Building up a big push", d: "Surprise elements and versatility" }},
{ question: "How do you react to an enemy push?", answers: { a: "Counter-attack on the other lane", b: "Defend solidly and counter-push", c: "Absorb some damage and build a counter-push", d: "Use cycle cards to defend and quickly reset" }},
{ question: "Pick a card you consider essential in any deck:", answers: { a: "Fireball", b: "Zap", c: "Skeleton Army", d: "Elixir Collector" }},
{ question: "What is your reaction to seeing a big tank like Golem?", answers: { a: "Rush the other lane", b: "Build a big defense", c: "Ignore and push the opposite lane", d: "Try to distract and chip away" }},
{ question: "Your favorite time to attack is:", answers: { a: "Immediately after defending", b: "When I have an elixir advantage", c: "Double elixir time", d: "When my opponent makes a mistake" }},
{ question: "Which of these spells do you prefer?", answers: { a: "Lightning", b: "Poison", c: "Fireball", d: "Rocket" }},
{ question: "What role do you prefer your cards to have?", answers: { a: "Versatility", b: "Specific counter", c: "High damage output", d: "Tankiness" }},
{ question: "How do you prefer to win matches?", answers: { a: "One big push", b: "Consistent pressure", c: "Defensive play and counter-attacks", d: "Spell cycle" }},
{ question: "What's your stance on elixir management?", answers: { a: "Aggressive spending for pressure", b: "Balanced - spend wisely", c: "Save for big pushes", d: "Spend as needed but focus on counters" }}
];
var results = { a: 0, b: 0, c: 0, d: 0 };
var currentQuestion = 0;
var swapHistory = [];
function startQuiz() {
results = { a: 0, b: 0, c: 0, d: 0 };
currentQuestion = 0;
document.getElementById('result').style.display = 'none';
document.getElementById('viableOptions').style.display = 'none';
document.getElementById('nextBtn').textContent = 'Start Quiz';
nextQuestion(); // calling nextQuestion function
}
function nextQuestion() {
if (currentQuestion < questions.length) {
document.getElementById('quiz').innerHTML = createQuestionElement(currentQuestion);
document.getElementById('nextBtn').textContent = currentQuestion === questions.length - 1 ? 'Finish' : 'Next Question';
} else {
showResults();
}
currentQuestion++;
};
function createQuestionElement(index) {
var question = questions[index];
var qElement = '<div class="question"><p>' + question.question + '</p>';
for (var key in question.answers) {
qElement += '<label><input type="radio" name="question' + index + '" value="' + key + '" onclick="selectAnswer(\'' + key + '\')">' + question.answers[key] + '</label>';
}
qElement += '</div>';
return qElement;
}
function selectAnswer(answer) {
results[answer]++;
if (currentQuestion === questions.length) {
document.getElementById('nextBtn').textContent = 'Show Results';
}
}
function showResults() {
var deckSuggestion = calculateDeckSuggestion();
document.getElementById('quiz').style.display = 'none';
document.getElementById('nextBtn').style.display = 'none';
var deckListHtml = '<h3>Your Ideal Deck:</h3><div id="deckImages">';
var totalElixirCost = 0;
var deckListText = deckSuggestion.split(': ')[1].split(', ');
deckListText.forEach(function(cardName) {
deckListHtml += `<div><img src="${cardImages[cardName.trim()]}" alt="${cardName}" class="card-image">${cardName}</div>`;
totalElixirCost += elixirCosts[cardName.trim()];
});
var averageElixirCost = (totalElixirCost / deckListText.length).toFixed(2);
document.getElementById('result').innerHTML = deckListHtml;
var avgElixirCostElement = document.getElementById('averageElixirCost');
if (!avgElixirCostElement) {
avgElixirCostElement = document.createElement('p');
avgElixirCostElement.id = 'averageElixirCost';
document.getElementById('result').appendChild(avgElixirCostElement);
}
avgElixirCostElement.textContent = 'Average Elixir Cost: ' + averageElixirCost;
document.getElementById('result').style.display = 'block';
showViableOptions(deckSuggestion);
}
function calculateDeckSuggestion() {
var maxScore = Math.max(...Object.values(results));
var deckType = Object.keys(results).find(key => results[key] === maxScore);
switch (deckType) {
case 'a':
return "Fast Cycle Deck: Hog Rider, Ice Spirit, Zap, Fireball, Skeletons, Musketeer, Cannon, Ice Golem";
case 'b':
return "Control Deck: X-Bow, Tesla, Fireball, Log, Ice Spirit, Skeletons, Archers, Knight";
case 'c':
return "Beatdown Deck: Golem, Baby Dragon, Mega Minion, Lightning, Zap, Elixir Collector, Lumberjack, Night Witch";
case 'd':
return "Hybrid Deck: Royal Giant, Furnace, Lightning, Log, Guards, Electro Wizard, Mega Minion, Miner";
default:
return "Explore various decks to find your perfect match!";
}
}
function showViableOptions(deckSuggestion) {
var viableOptionsText = "<h4>Viable Card Swaps:</h4><ul>";
var deckType = deckSuggestion.split(":")[0].trim();
var swaps = {
"Fast Cycle Deck": ["Mini P.E.K.K.A (for Hog Rider)", "Firecracker (for Musketeer)"],
"Control Deck": ["Ice Wizard (for Archers)", "Tornado (for Log)"],
"Beatdown Deck": ["Dark Prince (for Mega Minion)", "Poison (for Lightning)"],
"Hybrid Deck": ["Minions (for Mega Minion)", "Bowler (for Furnace)"]
};
swaps[deckType].forEach(function(swap, index) {
viableOptionsText += `<li>${swap} <button class="swapBtn" onclick="swapCard('${deckType}', ${index}, false)">Swap</button></li>`;
});
viableOptionsText += "</ul>";
document.getElementById('viableOptions').innerHTML = viableOptionsText;
document.getElementById('viableOptions').style.display = 'block';
}
function swapCard(deckType, swapIndex, isUnswap) {
var swaps = {
"Fast Cycle Deck": ["Mini P.E.K.K.A (for Hog Rider)", "Firecracker (for Musketeer)"],
"Control Deck": ["Ice Wizard (for Archers)", "Tornado (for Log)"],
"Beatdown Deck": ["Dark Prince (for Mega Minion)", "Poison (for Lightning)"],
"Hybrid Deck": ["Minions (for Mega Minion)", "Bowler (for Furnace)"]
};
var swapDetail = swaps[deckType][swapIndex];
var newCard = isUnswap ? swapDetail.split(" (for ")[1].slice(0, -1) : swapDetail.split(" (for ")[0];
var oldCard = isUnswap ? swapDetail.split(" (for ")[0] : swapDetail.split(" (for ")[1].slice(0, -1);
var cardDivs = document.getElementById('deckImages').querySelectorAll('div');
cardDivs.forEach(function(div) {
if (div.textContent.includes(oldCard)) {
div.innerHTML = `<img src="${cardImages[newCard]}" alt="${newCard}" class="card-image">${newCard}`;
}
});
var swapButton = document.querySelectorAll('.swapBtn')[swapIndex];
swapButton.textContent = isUnswap ? "Swap" : "Unswap";
swapButton.onclick = () => swapCard(deckType, swapIndex, !isUnswap);
recalculateAndDisplayAverageElixirCost();
}
function recalculateAndDisplayAverageElixirCost() {
var totalElixirCost = 0;
var cardDivs = document.getElementById('deckImages').querySelectorAll('div');
cardDivs.forEach(function(div) {
var cardName = div.querySelector('img').alt;
totalElixirCost += elixirCosts[cardName];
});
var averageElixirCost = (totalElixirCost / cardDivs.length).toFixed(2);
var avgElixirCostElement = document.getElementById('averageElixirCost');
if (!avgElixirCostElement) {
avgElixirCostElement = document.createElement('p');
avgElixirCostElement.id = 'averageElixirCost';
document.getElementById('result').appendChild(avgElixirCostElement);
}
avgElixirCostElement.textContent = 'Average Elixir Cost: ' + averageElixirCost;
}
var elixirCosts = {
"Hog Rider": 4,
"Ice Spirit": 1,
"Zap": 2,
"Fireball": 4,
"Skeletons": 1,
"Musketeer": 4,
"Cannon": 3,
"Ice Golem": 2,
"X-Bow": 6,
"Tesla": 4,
"Log": 2,
"Archers": 3,
"Knight": 3,
"Golem": 8,
"Baby Dragon": 4,
"Mega Minion": 3,
"Lightning": 6,
"Elixir Collector": 6,
"Lumberjack": 4,
"Night Witch": 4,
"Royal Giant": 6,
"Furnace": 4,
"Guards": 3,
"Electro Wizard": 4,
"Miner": 3,
"Mini P.E.K.K.A": 4,
"Firecracker": 3,
"Ice Wizard": 3,
"Tornado": 3,
"Dark Prince": 4,
"Poison": 4,
"Minions": 3,
"Bowler": 5,
};
var cardImages = {
"Hog Rider": "https://th.bing.com/th/id/OIP.nktPtncr0gZT1pl2cN6t5QAAAA?rs=1&pid=ImgDetMain",
"Ice Spirit": "https://th.bing.com/th/id/R.16bc4e655a74c1684778d34f2f7de19b?rik=eIv76AvwkbsSvw&riu=http%3a%2f%2fvignette1.wikia.nocookie.net%2fclashroyale%2fimages%2f2%2f2c%2fIceSpiritCard.png%2frevision%2flatest%3fcb%3d20160702201134&ehk=VlpPGk06Dk7p%2bVWAkcTsEMTr6giJ7ivUbo1bIVAadig%3d&risl=&pid=ImgRaw&r=0",
"Zap": "https://th.bing.com/th/id/OIP.rTYA_-__1HIUxXO8FruRwgAAAA?rs=1&pid=ImgDetMain",
"Fireball": "https://th.bing.com/th/id/OIP.dDSSKqfkem0s4mhZbqA-tgHaJB?rs=1&pid=ImgDetMain",
"Skeletons": "https://th.bing.com/th/id/R.8d7d7c119a0a91cafbbe1bfca996a182?rik=ChBMqDLHXnuXfg&riu=http%3a%2f%2fvignette3.wikia.nocookie.net%2fclashroyale%2fimages%2ff%2ff0%2fSkeletonsCard.png%2frevision%2flatest%2fscale-to-width-down%2f200%3fcb%3d20160124213515&ehk=Tvo98oSjeSTMg%2bnPu1dlFMHDFdvudaRgSEjpd0DZGpw%3d&risl=&pid=ImgRaw&r=0",
"Musketeer": "https://th.bing.com/th/id/OIP.MwRe7FLj535cxQXRkzb8SgAAAA?rs=1&pid=ImgDetMain",
"Cannon": "https://th.bing.com/th/id/R.0ae6062a8df37aa57e5369f4163be6fc?rik=Raxe1YWsqHniuA&riu=http%3a%2f%2fvignette1.wikia.nocookie.net%2fclashroyale%2fimages%2f7%2f70%2fCannonCard.png%2frevision%2flatest%3fcb%3d20160702201036&ehk=f0W%2fnh0elTzQYk5BYpuQ%2b%2bPoq1K8NDW8TxMjJynrtWI%3d&risl=&pid=ImgRaw&r=0",
"Ice Golem": "https://vignette2.wikia.nocookie.net/clashroyale/images/5/5f/IceGolemCard.png/revision/latest/scale-to-width-down/218?cb=20160930145935",
"X-Bow": "https://vignette.wikia.nocookie.net/clashroyale/images/b/b5/X-BowCard.png/revision/latest?cb=20160702201313",
"Tesla": "https://th.bing.com/th/id/OIP.uTb7RS_I5-ur6hxbdcwXHgAAAA?rs=1&pid=ImgDetMain",
"Log": "https://vignette1.wikia.nocookie.net/clashroyale/images/4/4d/TheLogCard.png/revision/latest?cb=20160702201255",
"Archers": "https://cdn.royaleapi.com/static/img/cards/archers.png?t=00e6f836c",
"Knight": "https://th.bing.com/th/id/OIP.9VOo26K24ACChbxkDAhU9QAAAA?rs=1&pid=ImgDetMain",
"Golem": "https://th.bing.com/th/id/R.4475f487e746eb555b3001877f7f2bd7?rik=edwz1J8No9GeMQ&riu=http%3a%2f%2fvignette3.wikia.nocookie.net%2fclashroyale%2fimages%2fd%2fd4%2fGolemCard.png%2frevision%2flatest%2fscale-to-width-down%2f218%3fcb%3d20160124213213&ehk=hQfoUT%2bdXAcITd3y8ODRjiBqDIFx6cQ3sagerv3CSoo%3d&risl=&pid=ImgRaw&r=0",
"Baby Dragon": "https://th.bing.com/th/id/OIP.peWovAvronkm6322ojegFgHaI4?rs=1&pid=ImgDetMain",
"Mega Minion": "https://th.bing.com/th/id/OIP.KS8HoGqdjVpT7kiOZcnKzQHaI3?rs=1&pid=ImgDetMain",
"Lightning": "https://th.bing.com/th/id/OIP.yHtRnwGndFEpPlNkcprGjwAAAA?rs=1&pid=ImgDetMain",
"Elixir Collector": "https://th.bing.com/th/id/OIP.At4dmvjxoDVX7cBtmXkPoQAAAA?rs=1&pid=ImgDetMain",
"Lumberjack": "https://www.pngkit.com/png/detail/338-3385597_lumberjack-clash-royale-cards-lumberjack.png",
"Night Witch": "https://th.bing.com/th/id/OIP.e_sJatfkyMiFvv03nsu_VQAAAA?rs=1&pid=ImgDetMain",
"Royal Giant": "https://th.bing.com/th/id/R.582d170b5f3ab22340dd3cfb24fa0154?rik=pLCnpTFypGxCGg&riu=http%3a%2f%2fvignette3.wikia.nocookie.net%2fclashroyale%2fimages%2f8%2f8b%2fRoyalGiantCard.png%2frevision%2flatest%3fcb%3d20160302023049&ehk=uV3thRYaigGuHwxZQCFslX3SFwUDifex9RNk5AYij6Y%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1",
"Furnace": "https://th.bing.com/th/id/R.e84462305dcc4b6a186c99524c5a1264?rik=F6L8AnwPZZxW6g&riu=http%3a%2f%2fvignette4.wikia.nocookie.net%2fclashroyale%2fimages%2f5%2f51%2fFurnaceCard.png%2frevision%2flatest%3fcb%3d20160518083429&ehk=nxrXXjsUcKPWmYWzbzThRAhtlYTVjKHOjEo5V15pvfw%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1",
"Guards": "https://th.bing.com/th/id/R.8cca169150f7da186a5c87a763ec331a?rik=gXl2a7UfN9uqPQ&riu=http%3a%2f%2fvignette3.wikia.nocookie.net%2fclashroyale%2fimages%2f5%2f51%2fGuardsCard.png%2frevision%2flatest%3fcb%3d20160514062101&ehk=ALYe%2bsRyTGXPF3zh32rgwL06245tBV5dnDB6jGUdWcM%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1",
"Electro Wizard": "https://th.bing.com/th/id/R.1f6b37f5d49e769f8e72483344cf3e01?rik=vHCHo8LBYbbp5Q&pid=ImgRaw&r=0",
"Miner": "https://th.bing.com/th/id/OIP.Ajeg7jXPUgn-3QjpDiBs1AAAAA?rs=1&pid=ImgDetMain",
"Mini P.E.K.K.A": "https://th.bing.com/th/id/OIP.sB7n6gyyiA5VbRUb17EemwAAAA?pid=ImgDet&w=230&h=276&rs=1",
"Firecracker": "https://th.bing.com/th/id/OIP.aka4WZ7QIomaXhQFTIOz9gAAAA?rs=1&pid=ImgDetMain",
"Ice Wizard": "https://th.bing.com/th/id/OIP.oiwR9g_xBSjJlZFXN4x33wAAAA?rs=1&pid=ImgDetMain",
"Tornado": "https://vignette4.wikia.nocookie.net/clashroyale/images/3/37/TornadoCard.png/revision/latest?cb=20161031190737",
"Dark Prince": "https://th.bing.com/th/id/OIP.o9_abzOUwu43ijabiUr-9AAAAA?rs=1&pid=ImgDetMain",
"Poison": "https://th.bing.com/th/id/OIP.EdCn5FHkc3K9V26d_qUn3AAAAA?rs=1&pid=ImgDetMain",
"Minions": "https://th.bing.com/th/id/OIP.sPVtaVlg1Igj9YdWqxQmQAAAAA?rs=1&pid=ImgDetMain",
"Bowler": "https://th.bing.com/th/id/OIP.w8BlgUHsUfspZZ7uaRYKOwAAAA?rs=1&pid=ImgDetMain",
};
var allCards = [
{ name: "Hog Rider", type: "Offensive", strategy: "Fast-paced attacks", elixirCost: 4 },
{ name: "Tesla", type: "Defensive", strategy: "Control and counter", elixirCost: 4 },
{ name: "Musketeer", type: "Support", strategy: "Control and counter", elixirCost: 4 },
{ name: "Golem", type: "Tank", strategy: "Building up a big push", elixirCost: 8 },
{ name: "Balloon", type: "Offensive", strategy: "Fast-paced attacks", elixirCost: 5 },
{ name: "Tornado", type: "Defensive", strategy: "Control and counter", elixirCost: 3 },
{ name: "Wizard", type: "Support", strategy: "Building up a big push", elixirCost: 5 },
{ name: "Giant", type: "Tank", strategy: "Building up a big push", elixirCost: 5 },
{ name: "Zap", type: "Support", strategy: "Fast-paced attacks", elixirCost: 2 },
{ name: "Fireball", type: "Support", strategy: "Control and counter", elixirCost: 4 },
{ name: "Ice Spirit", type: "Defensive", strategy: "Fast-paced attacks", elixirCost: 1 },
{ name: "Miner", type: "Offensive", strategy: "Surprise elements and versatility", elixirCost: 3 },
{ name: "Skeleton Army", type: "Defensive", strategy: "Control and counter", elixirCost: 3 },
{ name: "Elixir Collector", type: "Support", strategy: "Building up a big push", elixirCost: 6 },
{ name: "Lumberjack", type: "Offensive", strategy: "Fast-paced attacks", elixirCost: 4 },
{ name: "Baby Dragon", type: "Support", strategy: "Building up a big push", elixirCost: 4 },
{ name: "Night Witch", type: "Offensive", strategy: "Building up a big push", elixirCost: 4 },
{ name: "Royal Giant", type: "Tank", strategy: "Surprise elements and versatility", elixirCost: 6 },
{ name: "Electro Wizard", type: "Support", strategy: "Control and counter", elixirCost: 4 },
{ name: "Mega Minion", type: "Defensive", strategy: "Control and counter", elixirCost: 3 },
{ name: "Poison", type: "Support", strategy: "Surprise elements and versatility", elixirCost: 4 },
{ name: "Dark Prince", type: "Offensive", strategy: "Fast-paced attacks", elixirCost: 4 },
{ name: "Bowler", type: "Defensive", strategy: "Control and counter", elixirCost: 5 },
];
var userCardTypePreference = "Offensive";
var userStrategyPreference = "Fast-paced attacks";
function generateCustomDeckRecommendation(cardTypePreference, strategyPreference) {
var filteredCards = allCards.filter(function(card) {
return card.type === cardTypePreference && card.strategy === strategyPreference;
});
var recommendedDeck = filteredCards.map(function(card) {
return card.name;
}).join(', ')
return "Recommended Deck based on your preferences: " + recommendedDeck;
}
var customDeckRecommendation = generateCustomDeckRecommendation(userCardTypePreference, userStrategyPreference);
console.log(customDeckRecommendation);
document.getElementById('nextBtn').addEventListener('click', function() {
if (currentQuestion === questions.length) {
showResults();
} else {
nextQuestion();
}
});
startQuiz();
</script>
</body>
</html>
Relation to Computational Chemistry
- In computational chemistry, researchers often need to recommend sets of computational methods or parameters for simulating chemical processes, similar to recommending a deck in Clash Royale.
Data Model
- Computational Methods:
- Each method can be represented as an object with properties such as name, type, accuracy, and computational cost.
- Methods can be stored in an array, similar to questions in the Clash Royale project.
This is my second website:
Realestate Website:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Properties</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/DwwykcV8Qyq46cDfL" crossorigin="anonymous">
<style>
.house-body {
background-color: #f4f7f6;
font-family: 'Arial', sans-serif;
}
.house-container {
margin-top: 50px;
}
.house-h1 {
color: #333;
text-align: center;
margin-bottom: 40px;
}
.house-search-bar {
margin-bottom: 30px;
border-radius: 30px;
padding: 20px;
font-size: 18px;
}
.house-card {
transition: transform 0.3s ease-in-out;
border-radius: 20px;
overflow: hidden;
border: none;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
}
.house-card:hover {
transform: scale(1.05);
}
.house-card-img-top {
height: 200px;
object-fit: cover;
}
.house-card-title, .houses-card-text {
color: #333;
}
.house-btn-primary {
background-color: #3498db;
border: none;
border-radius: 20px;
padding: 10px 20px;
font-size: 16px;
}
.house-btn-primary:hover {
background-color: #48a2ca;
}
@media (max-width: 768px) {
.house-h1 {
font-size: 24px;
}
}
</style>
</head>
<body class="house-body">
<div class="container house-container">
<h1 class="house-h1">Explore Properties</h1>
<input type="text" id="search-bar" class="form-control house-search-bar" placeholder="Search by city">
<button id="sort-price-btn" class="btn house-btn-primary">Sort by Price</button>
<div class="row" id="house-cards"></div>
</div>
<div class="analysis-section">
<h3>Algorithm Complexity Analysis</h3>
<div id="mergeSortAnalysis">
<h4>Merge Sort</h4>
<p id="mergeSortTime">Time Complexity: O(n log n)</p>
<p id="mergeSortSpace">Space Complexity: O(n)</p>
</div>
<div id="binarySearchAnalysis">
<h4>Binary Search</h4>
<p id="binarySearchTime">Time Complexity: O(log n)</p>
<p id="binarySearchSpace">Space Complexity: O(1)</p>
</div>
<div id="listComprehensionAnalysis">
<h4>List Comprehension</h4>
<p id="listComprehensionTime">Time Complexity: O(n)</p>
<p id="listComprehensionSpace">Space Complexity: O(n)</p>
</div>
<div id="listProcessingAnalysis">
<h4>List Processing</h4>
<p id="listProcessingTime">Time Complexity: O(n)</p>
<p id="listProcessingSpace">Space Complexity: O(n)</p>
</div>
<div id="twoDIterationAnalysis">
<h4>2D Iteration (Matrix Transpose)</h4>
<p id="twoDIterationTime">Time Complexity: O(n)</p>
<p id="twoDIterationSpace">Space Complexity: O(n)</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script type="module">
import { uri, options } from '/student3/assets/js/api/config.js';
// Function to get the JWT token from cookies
function getJwtToken() {
const jwtCookie = document.cookie.split(';').find(cookie => cookie.trim().startsWith('jwt='));
return jwtCookie ? jwtCookie.split('=')[1] : null;
}
// Function to redirect to the login page if the JWT token does not exist
function redirectToLogin() {
window.location.href = "/student3/login"; // Adjust the login page URL as needed
}
// Check for the existence of the JWT token when the page loads
window.addEventListener('load', function() {
const jwtToken = getJwtToken();
// If the JWT token does not exist, redirect to the login page
if (!jwtToken) {
redirectToLogin();
}
});
// Your existing JavaScript code for fetching and rendering houses data
document.addEventListener('DOMContentLoaded', () => {
const houseCardsContainer = document.getElementById('house-cards');
const searchBar = document.getElementById('search-bar');
const sortPriceBtn = document.getElementById('sort-price-btn');
const placeholderImageUrl = 'https://www.avantistones.com/images/noImage.png';
let housesData = [];
// Define getHouseDetailsLink function
function getHouseDetailsLink(houseId) {
return `/houses/house_details?id=${houseId}`;
}
// Fetch data from the API
async function fetchData(url) {
try {
const response = await fetch(url);
const data = await response.json();
housesData = data;
renderHouses(housesData);
} catch (error) {
console.error('Error fetching data:', error);
}
}
// Render houses data
function renderHouses(houses) {
houseCardsContainer.innerHTML = '';
houses.forEach(house => {
const houseCard = document.createElement('div');
houseCard.classList.add('col-lg-4', 'col-md-6', 'mb-4');
houseCard.innerHTML = `
<div class="card house-card">
<img src="${house.imgSRC || placeholderImageUrl}" class="card-img-top house-card-img-top" alt="${house.address}">
<div class="card-body">
<h5 class="card-title house-card-title">${house.address}</h5>
<h5 class="card-title house-card-title">Price: $${house.price}</h5>
${house.livingarea ? `<p class="card-text houses-card-text">${house.livingarea} sqft</p>` : ''}
${house.bedrooms ? `<p class="card-text houses-card-text">Bedrooms: ${house.bedrooms}</p>` : ''}
${house.bathrooms ? `<p class="card-text houses-card-text">Bathrooms: ${house.bathrooms}</p>` : ''}
${house.id ? `<a href="${getHouseDetailsLink(house.id)}" class="btn house-btn-primary view-details-btn">View Details</a>` : ''}
</div>
</div>
`;
houseCardsContainer.appendChild(houseCard);
});
const detailsButtons = document.querySelectorAll('.view-details-btn');
detailsButtons.forEach(btn => {
btn.addEventListener('click', (e) => {
const houseId = e.target.getAttribute('data-house-id');
let baseUrl;
if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
baseUrl = "/houses/";
} else {
baseUrl = "https://real-estate-analyzation.github.io/RealEstateFrontend/houses/";
}
console.log(`${baseUrl}house_details?id=${houseId}`)
location.href = `${baseUrl}house_details?id=${houseId}`;
});
});
}
// Filter houses based on search term
function filterHouses() {
const searchTerm = searchBar.value.toLowerCase();
const filteredHouses = housesData.filter(house => {
const houseCity = house.city ? house.city.toLowerCase() : '';
const houseAddress = house.address ? house.address.toLowerCase() : '';
return houseCity.includes(searchTerm) || houseAddress.includes(searchTerm);
});
renderHouses(filteredHouses);
}
// Sort houses by price
async function sortHousesByPrice() {
const url = uri + '/api/house/houses/sorted';
await fetchData(url);
}
fetchData(uri + '/api/house/houses');
searchBar.addEventListener('input', filterHouses);
sortPriceBtn.addEventListener('click', sortHousesByPrice);
});
// Merge Sort Algorithm with Time Complexity O(n log n) and Space Complexity O(n)
function mergeSort(arr) {
if (arr.length <= 1) {
return arr;
}
const mid = Math.floor(arr.length / 2);
const left = mergeSort(arr.slice(0, mid));
const right = mergeSort(arr.slice(mid));
return merge(left, right);
}
function merge(left, right) {
let result = [];
let leftIndex = 0;
let rightIndex = 0;
while (leftIndex < left.length && rightIndex < right.length) {
if (left[leftIndex] < right[rightIndex]) {
result.push(left[leftIndex]);
leftIndex++;
} else {
result.push(right[rightIndex]);
rightIndex++;
}
}
return result.concat(left.slice(leftIndex)).concat(right.slice(rightIndex));
}
// Binary Search Algorithm with Time Complexity O(log n) and Space Complexity O(1)
function binarySearch(arr, target) {
let left = 0;
let right = arr.length - 1;
while (left <= right) {
const mid = Math.floor((left + right) / 2);
if (arr[mid] === target) {
return mid; // Target found
} else if (arr[mid] < target) {
left = mid + 1;
} else {
right = mid - 1;
}
}
return -1; // Target not found
}
// Example of building a list using List Comprehension
function listComprehensionExample() {
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num); // List comprehension equivalent in JavaScript
document.getElementById('listComprehensionTime').textContent = `Time Complexity: O(n)`;
document.getElementById('listComprehensionSpace').textContent = `Space Complexity: O(n)`;
console.log(`Original: ${numbers}, Squared: ${squaredNumbers}`);
}
// Example of processing a list using conventional and for-each methods
function listProcessingExample() {
const numbers = [1, 2, 3, 4, 5];
// Conventional for loop
let doubledNumbers = [];
for (let i = 0; i < numbers.length; i++) {
doubledNumbers.push(numbers[i] * 2);
}
document.getElementById('listProcessingTime').textContent = `Time Complexity: O(n)`;
document.getElementById('listProcessingSpace').textContent = `Space Complexity: O(n)`;
console.log(`Doubled using conventional loop: ${doubledNumbers}`);
// For-each loop
let tripledNumbers = [];
numbers.forEach(num => {
tripledNumbers.push(num * 3);
});
console.log(`Tripled using for-each loop: ${tripledNumbers}`);
}
// Example of 2D iteration (Flatten Matrix)
function flattenMatrixExample() {
const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
const flattenedArray = matrix.reduce((acc, row) => acc.concat(row), []);
// Output the result and complexities
document.getElementById('twoDIterationTime').textContent = `Time Complexity: O(n)`;
document.getElementById('twoDIterationSpace').textContent = `Space Complexity: O(n)`;
console.log('Original Matrix:', matrix);
console.log('Flattened Array:', flattenedArray);
}
function submitForm() {
// Example usage of the functions
listComprehensionExample();
listProcessingExample();
flattenMatrixExample();
bigOAnalysis();
}
// Big O Analysis
function bigOAnalysis() {
document.getElementById('mergeSortTime').textContent = `Time Complexity: O(n log n)`;
document.getElementById('mergeSortSpace').textContent = `Space Complexity: O(n)`;
document.getElementById('binarySearchTime').textContent = `Time Complexity: O(log n)`;
document.getElementById('binarySearchSpace').textContent = `Space Complexity: O(1)`;
document.getElementById('listComprehensionTime').textContent = `Time Complexity: O(n)`;
document.getElementById('listComprehensionSpace').textContent = `Space Complexity: O(n)`;
document.getElementById('listProcessingTime').textContent = `Time Complexity: O(n)`;
document.getElementById('listProcessingSpace').textContent = `Space Complexity: O(n)`;
document.getElementById('twoDIterationTime').textContent = `Time Complexity: O(n)`;
document.getElementById('twoDIterationSpace').textContent = `Space Complexity: O(n)`;
}
// Call the examples and Big O analysis
document.addEventListener('DOMContentLoaded', () => {
submitForm();
});
</script>
</body>
</html>
Relation to Computational Chemistry
- In computational chemistry, properties of molecules and materials are often represented and analyzed in a similar manner to how real estate properties are handled in this project.
Data Model
- Molecular Properties:
- Each molecule can be represented as an object with properties such as molecular weight, energy levels, structure, etc.
- Molecules can be stored in an array, similar to properties in real estate.
My third website I will be showing is a Binary number related site
Binary Website:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Binary-Decimal Guessing Game</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
margin-top: 0;
font-size: 36px;
color: #333;
}
p {
font-size: 18px;
color: #555;
}
.carnival-ride {
width: 300px;
height: 200px;
background-color: #222;
border-radius: 10px;
margin: 20px auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 24px;
}
.binary-digits {
display: flex;
gap: 5px;
}
.binary-digit {
transition: transform 0.5s ease-in-out;
}
.carnival-cart {
width: 30px;
height: 30px;
background-color: #f39c12;
border-radius: 50%;
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
transition: bottom 1s ease-in-out;
}
input[type="text"],
button {
padding: 10px;
margin: 10px;
font-size: 16px;
border: none;
border-radius: 5px;
background-color: #f39c12;
color: white;
cursor: pointer;
}
#hintContent img {
width: 1000px; /* Adjusted the size of the image */
}
</style>
</head>
<body>
<div class="container">
<h1>Binary Guessing Game</h1>
<p>Get ready for a binary ride!</p>
<p>Guess the decimal equivalent of the binary number you see</p>
<p id="binaryNumber"></p>
<input type="text" id="guessInput" placeholder="Enter your guess">
<button onclick="startRide()">Check Guess</button>
<p id="result"></p>
<!-- Interactive carnival ride representing binary-to-decimal conversion -->
<div class="carnival-ride" onclick="startRide()">
<div class="binary-digits"></div>
<div class="carnival-cart"></div>
</div>
</div>
<!-- Show Hint button -->
<button onclick="showHint()">Show Hint</button>
<div id="hintContent" style="display: none;">
<!-- Visual Hint content -->
<p>Hint: Binary to Decimal Conversion</p>
<p>Imagine a series of switches or lights that can be ON (1) or OFF (0).</p>
<img src="/student3/images/Lightbulb.png" alt="Visual representation of binary numbers">
<p>In binary, each position represents a power of 2, similar to counting in units, tens, hundreds, etc.</p>
<p>For example, from right to left: 1, 2, 4, 8, 16...</p>
</div>
<script>
let rideStarted = false;
let binaryToShow = '';
// Function to generate a random binary number
function generateRandomBinary() {
const binaryLength = 8; // Change the length as needed
let binary = '';
for (let i = 0; i < binaryLength; i++) {
const randomBit = Math.floor(Math.random() * 2);
binary += randomBit;
binaryToShow += randomBit;
}
return binary;
}
// Initialize the game
let randomBinary = generateRandomBinary();
let binaryNumberElement = document.getElementById('binaryNumber');
binaryNumberElement.innerText = `Binary Number: ${binaryToShow}`;
// Display binary digits on the ride
const binaryDigitsContainer = document.querySelector('.binary-digits');
randomBinary.split('').forEach((digit) => {
const digitElement = document.createElement('div');
digitElement.classList.add('binary-digit');
digitElement.innerText = digit;
binaryDigitsContainer.appendChild(digitElement);
});
// Function to start the interactive ride animation
function startRide() {
if (!rideStarted) {
rideStarted = true;
const cart = document.querySelector('.carnival-cart');
cart.style.bottom = '10px'; // Adjust cart position to simulate movement
setTimeout(() => {
cart.style.bottom = 'calc(100% - 30px)';
document.querySelectorAll('.binary-digit').forEach((digit, index) => {
setTimeout(() => {
digit.style.transform = 'scale(0)';
}, 100 * index);
});
}, 10);
} else {
checkGuess();
}
}
// Function to check the user's guess
function checkGuess() {
const userGuess = document.getElementById('guessInput').value;
if (!/^\d+$/.test(userGuess)) {
document.getElementById('result').innerText = 'Please enter a valid integer guess.';
return;
}
const decimalEquivalent = parseInt(randomBinary, 2);
if (parseInt(userGuess) === decimalEquivalent) {
document.getElementById('result').innerText = 'Congratulations! Your guess is correct.';
moveCarnivalCart();
binaryToShow = '';
randomBinary = generateRandomBinary();
binaryNumberElement.innerText = `Binary Number: ${binaryToShow}`;
const binaryDigitsContainer = document.querySelector('.binary-digits');
binaryDigitsContainer.innerHTML = '';
randomBinary.split('').forEach((digit) => {
const digitElement = document.createElement('div');
digitElement.classList.add('binary-digit');
digitElement.innerText = digit;
binaryDigitsContainer.appendChild(digitElement);
});
} else {
document.getElementById('result').innerText = `Sorry, the correct answer is ${decimalEquivalent}. Better luck next time!`;
}
}
// Function to move the carnival cart
function moveCarnivalCart() {
const cart = document.querySelector('.carnival-cart');
cart.style.bottom = '10px';
setTimeout(() => {
cart.style.bottom = 'calc(100% - 30px)';
}, 500);
}
// Function to show/hide the hint content
function showHint() {
const hintContent = document.getElementById('hintContent');
hintContent.style.display = hintContent.style.display === 'none' ? 'block' : 'none';
}
</script>
</body>
</html>
Relation to Computational Chemistry
- In computational chemistry, conversions between different representations of data (e.g., binary to decimal) are common. This project can be adapted to handle conversions between different chemical formats or units.
Data Model
- Conversion Tasks:
- Each task can be represented as an object with properties such as input format, output format, and the data to be converted.
- Tasks can be stored in an array, similar to the binary-to-decimal guessing game.
What Seperates me from other candidates:
Throughout my experience in the night at the mueseums, I have learned how to get explain code and get people really intrigued and interested in my projects. Even for people who don’t do coding or have never touched it before, they understand my explanations and are always super intrigued and interested in my projects. I have provided images that will be shown below.
