msb-public
/
30-Days-Of-JavaScript
mirror of https://github.com/Asabeneh/30-Days-Of-JavaScript
1
0
Code Issues Projects Releases Wiki Activity

attempted day 21 exercises

Browse Source
pull/865/head
Gideon-Buba 1 year ago
parent 4cddf2e3d4
commit a8aa38f620
6 changed files with 85 additions and 5 deletions
Show Stats Download Patch File Download Diff File

3
22_Day_Manipulating_DOM_object/22_day_starters/project_1/index.html
Unescape View File

@ -3,13 +3,14 @@
<head> <head>
<title>30DaysOfJavaScript:22 Day: Number Generator </title> <title>30DaysOfJavaScript:22 Day: Number Generator </title>
<link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>
<h1>Number Generator</h1> <h1>Number Generator</h1>
<h2>30DaysOfJavaScript:DOM Day 2</h2> <h2>30DaysOfJavaScript:DOM Day 2</h2>
<h3>Author: Asabeneh Yetayeh</h3> <h3>Author: Asabeneh Yetayeh</h3>
<div class="wrapper"> <div id="number-container">
</div> </div>

40
22_Day_Manipulating_DOM_object/22_day_starters/project_1/scripts/main.js
Unescape View File

@ -1,2 +1,38 @@
console.log(countries) // function to check if number is prime
alert('Open the console and check if the countries has been loaded') function isPrime(num) {
if (num <= 1) return false;
if (num <= 3) return true;
if (num % 2 === 0 || num % 3 === 0) return false;
let i = 5;
while (i * i <= num) {
if (num % i === 0 || num % (i + 2) === 0) return false;
i += 6;
}
return true;
}
// Get the container div
const container = document.getElementById("number-container");
// Loop to generate numbers from 1 to 100
for (let i = 0; i <= 100; i++) {
const numberDiv = document.createElement("div");
numberDiv.textContent = i;
numberDiv.classList.add("number");
if (i % 2 === 0) {
numberDiv.classList.add("even");
} else {
numberDiv.classList.add("odd");
}
if (isPrime(i)) {
numberDiv.classList.add("prime");
}
container.appendChild(numberDiv);
}

21
22_Day_Manipulating_DOM_object/22_day_starters/project_1/styles.css
Unescape View File

@ -0,0 +1,21 @@
.number {
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
font-size: 18px;
margin: 5px;
line-height: 30px;
}
.even {
background-color: green;
}
.odd {
background-color: yellow;
}
.prime {
background-color: red;
}

4
22_Day_Manipulating_DOM_object/22_day_starters/project_2/index.html
Unescape View File

@ -3,6 +3,7 @@
<head> <head>
<title>30DaysOfJavaScript:22 Day: World Countries List</title> <title>30DaysOfJavaScript:22 Day: World Countries List</title>
<link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>
@ -15,7 +16,7 @@
</header> </header>
<div class="countries-container"> <div class="countries-container" id="countries-container">
<div class="countries-wrapper"> <div class="countries-wrapper">
</div> </div>
@ -23,6 +24,7 @@
<script src="./data/countries.js"></script> <script src="./data/countries.js"></script>
<script src="./js/script.js"></script> <script src="./js/script.js"></script>
<script src="./scripts/main.js"></script>
</body> </body>

10
22_Day_Manipulating_DOM_object/22_day_starters/project_2/scripts/main.js
Unescape View File

@ -1 +1,9 @@
console.log(countries) const countryContainer = document.getElementById("country-container");
// Loop through the array and create a box for each country
countries.forEach(country => {
const countryBox = document.createElement("div");
countryBox.textContent = country;
countryBox.classList.add("country-box");
countryContainer.appendChild(countryBox);
});

12
22_Day_Manipulating_DOM_object/22_day_starters/project_2/styles.css
Unescape View File

@ -0,0 +1,12 @@
/* Style for country boxes */
.country-box {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #ccc;
text-align: center;
line-height: 100px;
margin: 5px;
font-size: 14px;
background-color: #f0f0f0;
}
Write Preview
Loading…
Cancel
Save