100xdevs-cohort-3 · Maheshpawar01 · Apr 22, 2025 · Apr 22, 2025 · Apr 22, 2025 · Apr 22, 2025
diff --git a/week-3/easy/The-Pokémon/pokemonSolution/index.html b/week-3/easy/The-Pokémon/pokemonSolution/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pokemon Game</title>
+</head>
+<body>
+    <h1>Pokemon car Viewer</h1>
+    <div>
+        <input type="number" id="cardCount">
+        <button onclick="getCards()">Show cards</button>
+    </div>
+    <div id="cardContainer">
+
+    </div>
+    <script>
+               // get pokemon by id 
+        async function getCards() {
+        const id = document.getElementById('cardCount').value;
+        const container = document.getElementById('cardContainer');
+        container.innerHTML = '';
+
+        if (!id) {
+            alert("Please enter a Pokémon ID");
+            return;
+        }
+
+        try {
+            const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`);
+            const data = await response.json();
+
+            const cardDiv = document.createElement('div');
+            cardDiv.className = 'card';
+
+            cardDiv.innerHTML = `
+                <h3>${data.name.toUpperCase()}</h3>
+                <img src="${data.sprites.front_default}" alt="${data.name}">
+                <p><strong>Type:</strong> ${data.types.map(t => t.type.name).join(', ')}</p>
+            `;
+
+            container.appendChild(cardDiv);
+
+        } catch (error) {
+            container.innerHTML = "<p>Pokémon not found.</p>";
+            console.error(error);
+        }
+    }
+
+
+</script>
+</body>
+</html>
diff --git a/week-3/easy/bg-color-changer/index.html b/week-3/easy/bg-color-changer/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bg-color-changer</title>
+</head>
+<body>
+    <div style="margin: 0; height: 100vh; display: flex; align-items: flex-end; justify-content: center;">
+        <div style="display: flex; justify-content: center; list-style: none; background-color: bisque; margin: 0; padding: 0; border-radius: 1rem;  ">
+            <button onclick="changeBgColor(`red`)" style="margin: 1rem; background-color: red; border-radius: 8px; padding: 8px; cursor: pointer; border: none;">
+                Red
+            </button>
+            <button onclick="changeBgColor(`green`)" style="margin: 1rem; background-color: green; border-radius: 8px; padding: 8px; cursor: pointer; border: none;">
+                green
+            </button>
+            <button onclick="changeBgColor(`yellow`)" style="margin: 1rem; background-color: yellow; border-radius: 8px; padding: 8px; cursor: pointer; border: none;">
+                yellow
+            </button>
+            <button onclick="changeBgColor(`blue`)" style="margin: 1rem; background-color: blue; border-radius: 8px; padding: 8px; cursor: pointer; border: none;">
+                blue
+            </button>
+            <button onclick="changeBgColor(`orange`)" style="margin: 1rem; background-color: orange; border-radius: 8px; padding: 8px; cursor: pointer; border: none;">
+                orange
+            </button>
+            <button onclick="changeBgColor(`pink`)" style="margin: 1rem; background-color: pink; border-radius: 8px; padding: 8px; cursor: pointer; border: none;">
+                pink
+            </button>
+
+        </div>
+    </div>
+
+    <script>
+        function changeBgColor(color){
+            document.body.style.backgroundColor = color
+        }
+    </script>
+</body>
+</html>
diff --git a/week-3/easy/quiz-app/index.html b/week-3/easy/quiz-app/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Quize App</title>
+</head>
+<body>
+    <h2>Quize App</h2>
+    <div id="quize-container">
+        <h2 id="question">question comes here........?</h2>
+        <input type="radio" name="option" value="a"><span id="option-a">A</span><br>
+        <input type="radio" name="option" value="b"><span id="option-b">B</span><br>
+        <input type="radio" name="option" value="c"><span id="option-c">C</span><br>
+        <input type="radio" name="option" value="d"><span id="option-d">D</span><br>
+    </div>
+    <button id="submit-btn">Submit</button>
+    <button id="result-btn">Show Result</button>
+    <h3 id="result-container" style="display: none;"></h3>
+
+    <script type="module">
+
+        import {quizData} from './data.js'
+        console.log(quizData)
+
+        const question = document.getElementById('question')
+        const submitBtn = document.getElementById('submit-btn')
+        const resultBtn = document.getElementById('result-btn')
+        const resultContainer = document.getElementById('result-container')
+
+        const optionA = document.getElementById('option-a')
+        const optionB = document.getElementById('option-b')
+        const optionC = document.getElementById('option-c')
+        const optionD = document.getElementById('option-d')
+
+        let currentIndex = 0;
+        let score = 0;
+
+        function loadQuestion(){
+            const currentQuestion = quizData[currentIndex]
+            question.innerText =`${currentIndex +  1}. ${currentQuestion.question}`;
+
+            optionA.innerText = currentQuestion.a;
+            optionB.innerText = currentQuestion.b;
+            optionC.innerText = currentQuestion.c;
+            optionD.innerText = currentQuestion.d;
+
+            //clear previos selection
+            document.querySelectorAll('input[name="option"]').forEach(el=>el.checked = false);
+        }
+
+        submitBtn.addEventListener('click', ()=>{
+            const selectedOption = document.querySelector('input[name="option"]:checked');
+            if(!selectedOption){
+                alert("please select any option");
+                return;
+            }
+
+            if(selectedOption.value === quizData[currentIndex].correct){
+                score++
+            }
+
+            currentIndex++
+
+            //hiding submit btn (if condition)
+            if(currentIndex < quizData.length){
+                loadQuestion();
+            }else{
+                submitBtn.style.display = 'none'
+                // submitBtn.style.display = 'inline-block'
+            }
+        });
+
+        //result btn logic
+
+        resultBtn.addEventListener('click', ()=>{
+            //showing result container block
+            resultContainer.style.display= 'block';
+            resultContainer.innerHTML = `<h2> Your score ${score} out of ${quizData.length}</h2>`
+                //hiding result btn
+            resultBtn.style.display="none"
+        });
+
+        //load the question
+        loadQuestion();
+    </script>
+</body>
+
+</html>
diff --git a/week-3/medium/Form-Builder/index.html b/week-3/medium/Form-Builder/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>form</title>
+</head>
+<body>
+    <h1>form builder</h1>
+
+    <div id="field">
+        <!-- //field type selctor -->
+        <label for="">Select Field Type</label><br>
+        <select name="" id="field-type" >
+            <option value="text">text input</option>
+            <option value="checkbox">checkbox</option>
+            <option value="radio">radio</option>
+        </select><br>
+    </div><br>
+
+    <!-- input for labels -->
+     <label for="" >field label</label><br>
+     <input id="field-label"><br>
+<br>
+    <!-- //add field btn -->
+        <button id="add-field-btn">add field btn</button><br>
+
+<hr>
+
+    <!-- preview area -->
+    <h3>form Preview</h3>
+    <form action="" id="form-preview"></form>
+
+    <script>
+        const fieldType = document.getElementById('field-type')
+        const fieldLabel = document.getElementById('field-label')
+        const addFieldBtn = document.getElementById('add-field-btn')
+        const formPreview = document.getElementById('form-preview')
+
+        addFieldBtn.addEventListener('click', ()=>{
+            const type = fieldType.value;
+            const labelText = fieldLabel.value.trim();
+
+            if(!labelText){
+                alert('Please enter the label for the field')
+                return;
+            }
+
+            const wrapper = document.createElement('div')
+
+            const label = document.createElement('label')
+            label.innerText = labelText
+
+            const input = document.createElement('input')
+            input.type = type;
+
+            wrapper.appendChild(label)
+            wrapper.appendChild(document.createElement('br'));
+            wrapper.appendChild(input)
+            formPreview.appendChild(wrapper)
+
+            // clear lable inputs for next field
+            fieldLabel.value = ''
+        });
+    </script>
+</body>
+</html>