- Create a simple landing page with navbar and hero section using HTML and CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
}
nav {
background-color: #333;
padding: 10px;
text-align: center;
}
nav a {
color: white;
text-decoration: none;
margin: 0 15px;
font-size: 18px;
}
.hero-section {
background: url('hero-image.jpg') center/cover no-repeat;
color: white;
text-align: center;
padding: 100px 20px;
}
.hero-section h1 {
font-size: 3em;
margin-bottom: 20px;
}
.hero-section p {
font-size: 1.2em;
margin-bottom: 40px;
}
.cta-button {
background-color: #4CAF50;
color: white;
padding: 15px 30px;
font-size: 1.2em;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.cta-button:hover {
background-color: #45a049;
}
</style>
<title>Simple Landing Page</title>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<div class="hero-section">
<h1>Welcome to Our Website</h1>
<p>Discover a world of possibilities with our amazing services.</p>
<a href="#" class="cta-button">Get Started</a>
</div>
</body>
</html>
Create a box-shadow with a 5px horizontal and 10px vertical offset. Use a 10px spread and no blur (don't set a color) - HTML and CSS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .box-with-shadow { width: 200px; height: 200px; background-color: #3498db; box-shadow: 5px 10px 10px 0px; /* 5px horizontal, 10px vertical, 10px spread, no blur */ margin: 50px; } </style> <title>Box Shadow Example</title> </head> <body> <div class="box-with-shadow"></div> </body> </html>Create a counter application with increment and decrement buttons using JavaScript.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> body { font-family: "Arial", sans-serif; text-align: center; margin: 50px; } #counter { font-size: 2em; margin-bottom: 20px; } button { font-size: 1em; padding: 10px 20px; margin: 0 10px; cursor: pointer; } </style> <title>Counter App</title> </head> <body> <h1>Counter App</h1> <div id="counter">0</div> <button onclick="increment()">Increment</button> <button onclick="decrement()">Decrement</button> <script> let count = 0; function updateCounter() { document.getElementById("counter").textContent = count; } function increment() { count++; updateCounter(); } function decrement() { if (count > 0) { count--; updateCounter(); } } </script> </body> </html>Given an array of quotes, generate random quotes and display them using JavaScript.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> body { font-family: "Arial", sans-serif; text-align: center; margin: 50px; } #quoteDisplay { font-size: 1.5em; margin-bottom: 20px; } button { font-size: 1em; padding: 10px 20px; cursor: pointer; } </style> <title>Random Quote Generator</title> </head> <body> <h1>Random Quote Generator</h1> <div id="quoteDisplay"></div> <button onclick="generateRandomQuote()">Generate Random Quote</button> <script> const quotes = [ "The only way to do great work is to love what you do. - Steve Jobs", "Innovation distinguishes between a leader and a follower. - Steve Jobs", "Life is what happens when you're busy making other plans. - John Lennon", "The future belongs to those who believe in the beauty of their dreams. - Eleanor Roosevelt", "Success is not final, failure is not fatal: It is the courage to continue that counts. - Winston Churchill", ]; function generateRandomQuote() { const randomIndex = Math.floor(Math.random() * quotes.length); const randomQuote = quotes[randomIndex]; document.getElementById("quoteDisplay").textContent = randomQuote; } </script> </body> </html>Create a stopwatch application using React JS (functional components)
Initialize State: Create state variables to track the elapsed time (initially set to 0) and a boolean to control the running state of the stopwatch.
Setup Interval: Use the
useEffecthook to start an interval that increments the elapsed time every 1000 milliseconds (1 second) when the stopwatch is running.Create Start/Stop Buttons: Implement buttons to start and stop the stopwatch. Toggle the boolean state to control the running status.
Implement Reset: Add a reset button to set the elapsed time back to 0 when clicked. Ensure the stopwatch is stopped before resetting.
Display Elapsed Time: Render the elapsed time on the UI, updating it dynamically as the stopwatch runs. Format the time to minutes, seconds, and milliseconds for better readability.
Create a simple todo app with just 2 features - adding tasks, and deleting them using React JS
State Setup: Create a state variable using the useState hook to store an array of tasks. Initialize it as an empty array.
Implement Task Addition: Create an input field and a button to add tasks. Use the input value to create a new task object and update the state by adding it to the existing tasks array.
Delete Task Functionality: Implement a delete button for each task. Pass a unique identifier to each task and use it to filter out the task when the delete button is clicked, updating the state accordingly.
Thank you for taking the time to read! I hope this blog has been a valuable learning experience for you. Don't hesitate to share it with others, and remember, sharing knowledge is a powerful way to inspire and grow together. Keep the learning spirit alive! 😊🚀 #HappyCoding #KeepSharing