Skip to content

agamesplay/FullStackDevProjects

Repository files navigation

FullStackDevProjects

Basic HTML Projects to Advance Full Stack Development Project. Now 8 Projects are done.

FullStackDevProjects

This repository contains various projects related to full-stack development, including interactive web pages and more.

@ 02.Interactive Webpages

Favorite Color Select

This is a simple web application that allows users to select their favorite color from a dropdown menu. Upon selection, the application displays a message indicating the chosen color and dynamically updates the text and background styles.

Directory Name

Favorite Color Select

Features

  • A dropdown menu with three color options: Red, Green, and Blue.
  • Dynamic text and style changes based on the selected color.
  • Event handling using JavaScript to capture user input.
  • Inline CSS for styling elements.

Project Files

The project contains the following files:

  1. HTML (index.html):
    The main structure of the web page with a dropdown menu and an interactive paragraph.

  2. CSS (fcs.css):
    Defines the styling for the dropdown and the background of the web page.

  3. JavaScript (fcs.js):
    Handles the logic to dynamically update the content and styles based on the user's selection.

Code Explanation

HTML

<select id="colorOption">
    <option selected disabled>Select Colors</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>
<p id="ptext"></p>

Guessing Game Project

A simple number guessing game built with HTML, CSS, and JavaScript. The game generates a random number between 1 and 100, and the player has to guess it within a limited number of attempts.

Features

  • Responsive Design: The game is designed to be responsive and works well on various screen sizes.
  • Interactive Feedback: Provides immediate feedback on whether the guess is too high or too low.
  • Attempt Limit: The player has a limited number of attempts to guess the number correctly.

How to Play

  1. Open the index.html file in a web browser.
  2. Enter your guess in the input field.
  3. Click the "Submit Guess" button to see if your guess is correct or not.
  4. Keep guessing until you correctly guess the number or run out of attempts.

Technologies Used

  • HTML: For structuring the content.
  • CSS: For styling and responsiveness.
  • JavaScript: For interactive functionality and game logic.

License

[This project is licensed under the MIT License.]

☕ Code & Brave Café - Coffee Shop Menu

Welcome to the Code & Brave Café — a cozy little frontend project that showcases a simple and stylish coffee shop menu using HTML and CSS.

This project is perfect for practicing responsive layouts, custom fonts, and clean UI presentation.


🚀 Project Features

  • 🧁 Menu List with popular coffee and snacks
  • 🎨 Custom Fonts and soft color themes for a café vibe
  • 📱 Responsive Design — adapts to different screen sizes
  • 🖼️ Café Image for visual appeal
  • 💡 Minimal and clean layout with proper HTML5 structure

📁 Folder Structure

About

Basic HTML Projects to Advance Full Stack Development Project.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published