Open yogeshtakeo opened 1 year ago
Name: Bikalp Timalsina Task 9 : JS and CSS Github URL: https://github.com/Youngbikalp/Task-9-JS-and-CSS/tree/master
Name: Anil Timalsina Task 09: JS and CSS Github URL : https://github.com/aniltimalsina/js-css-react
Name: Shanti Basnet Task9: JS and CSS url: https://github.com/shantibasnet/variable/tree/master
Name: Manoj Basnet Task9: JS and CSS url: https://github.com/mbasnet123456/JS-and-CSS.git
Name: Santona Subedi Task9: JS and CSS github repo: https://github.com/sansubed/ReactViteAppTask9.git
Name: Raj Kumar Maharjan Task 9 : js & CSS Github: https://github.com/samragi99/css-javaScript.git
Name : Narayan Adhikari Task:9 CSS styling and JS variable GitHub: https://github.com/Narayanadhikari9/Variable
Name: Madhav Dhital Task 9: JS and CSS GitHub: https://github.com/Madhv98/task9.git
Name Chij shrestha task 9: jss and css https://github.com/Cheesesth1/creating-manakamana.git
Name Prakash Karki Task 9: JS and CSS GitHub URL:https://github.com/karki37/js-css
Task 9: CSS Styling and JS Variables in a React Project with Vite
Objective:
Apply CSS styling and use JavaScript variables in a React project created with Vite.
Task Overview
Task Details
- Review CSS Styling and JavaScript Variables.
Watch a tutorial video or read articles on CSS styling and JavaScript variables. Youtube video to learn about variables CSS styling methodology Familiarize yourself with the basics of CSS selectors, properties, and values. Understand the concept of JavaScript variables and their usage.
- Set Up a React Project with Vite.
You can also use the normal way that we used to create the vite react project with
npx create-vite@latest project_name
or Open a terminal or command prompt. Create a new directory for your project:mkdir react-styling-variables cd react-styling-variables
Set up a new React project using Vite by running the following command:npm init vite@latest
- Apply CSS Styling.
styles.css
) in the src directory and write CSS styles to target the class names used in the component.import './styles.css'
;) to apply the styles.Note : Use of proper Stylings UI should be applied padding, margin , border, color, background height , width and the use of px , rem and percentage (%) should be shown in the screenshot submission
- Use JavaScript Variables.
Identify a scenario where you want to enhance interactivity using JavaScript variables.
Declare a JavaScript variable in the component file
(e.g., const myVariable = 'Hello, World!';)
.Use the JavaScript variable within the component JSX
(e.g., <h1>{myVariable}</h1>)
.- Test and Refine
Start the development server by running the following command in the project directory:
npm run dev
Open your web browser and navigate to the provided local development server URL (e.g., http://localhost:3000).
Verify that the CSS styles are applied to the targeted elements.
Check that the JavaScript variable is rendered correctly within the component.
Task Submission
Take a screenshot of the rendered semantic components in the browser. Share the screenshot of the output and the code that you have written in the issue comment box. Don't forget to mention GitHub URL and your name in the comment section.