AskJS

This repository contains two fun and interactive web projects that showcase basic JavaScript event handling, CSS styling, and HTML structure. Both projects are designed to provide engaging user experiences through dynamic interactions.

Purpose and Roadmap

The purpose of this project is to provide a new and playful way to engage with your loved ones. If you're looking for a fun way to entertain or surprise someone each month, the project provides a flexible structure where you can easily customize elements like texts, colors, and GIFs directly in the code. For instance, project 2 was created by making small modifications to project 1. In the future, consider adding new versions of this JS project that include ✨a new question each month✨ for your special ones.

Project 1: AskJS_01

AskJS_01 File Overview

Features

• Interactive Buttons:

  • Yes Button: Changes color, initiates dynamic background color changes, and displays a celebratory gif.
  • We'll See Button: Changes color, stops background color changes, and shows a playful gif.
  • No Button: Moves randomly when hovered over, creating an engaging user experience.

• Dynamic Background Changes: Background color alternates every 0.975 seconds when the "Yes" button is clicked.

Project 2: AskJS_02

AskJS_02 File Overview

Features

• Interactive Buttons:

  • Yes Button: Changes color and background, displays a thank you message, and shows a playful gif.
  • No Button: Moves randomly when hovered over, creating an engaging user experience.

• Dynamic Visual Effects: The background and button styles change based on user interaction.

• Shining Text Effect: The question text gets a glowing effect when the "Yes" button is clicked.

Technologies

• HTML: For structuring the content.
• CSS: For styling and positioning elements.
• JavaScript: For handling interactive features and dynamic behaviors.

Setup and Installation

1. Clone the Repository

   git clone https://github.com/gunsugunaydin/askjs.git

2. Navigate to the Project Directory

   cd askjs

3. Open index.html in a Web Browser Simply open the index.html file with a web browser to see the project in action.

4. Alternatively, you can open the repository directly in VS Code using the following trick: simply prepend https://vscode.dev/ to the repository URL. For example:

   https://vscode.dev/github.com/gunsugunaydin/AskJS

File Structure

• index.html: The main HTML file containing the structure and content of the project.
• style.css: The CSS file for styling the page and its elements.
• index.js: The JavaScript file implementing the interactive features and behaviors.

I developed my first JavaScript project with a meaningful purpose 😌👍🏻, and I hope you enjoy it. If you encounter any issues or have feedback, please feel free to contact me. And don't hesitate to say that the button is 'buttoning'—because it is!

• Email: gunsugunay98@gmail.com
• LinkedIn: linkedin.com/in/gunsugunaydin