How to make dashboard page in reactjs - html

I want to create this type dashboard enter image description here but not able to work. How can we make this type style.
I try to make this type dashboard page in my code but it's not work. Anybody please help me out. And check my code below.
My js code
return (
<div className="dashboard">
<div className="dashboard__container">
Logged in as
<div>{name}</div>
<div>{user?.email}</div>
<button className="dashboard__btn" onClick={logout}>
Logout
</button>
</div>
</div>
);
}
And my css code
.dashboard {
height: 100vh;
width: 100%;
background: #3e295a40;
}
.dashboard__container {
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: left;
background-color: #15b88357;
padding: 1em 20px 1em 20px;
color: white;
font-weight: bold;
}
.dashboard__btn {
margin-top: -5px;
font-size: 18px;
padding: 0.25em 0.5em;
border: none;
color: white;
background-color: #402958;
}
.center { text-align: center; }
Please help me out.

I am using bootstrap for "css only" to design my website generally. Here is how I do it.
/public/index.html
You can see that I have linked to my local bootstrap css file inside head tag.
<!DOCTYPE html>
<html lang="en">
<head>
<script>
if(window.screen.height < window.screen.width) {
window.stop()
// window.location = "https://google.com"
}
</script>
<script src="init.js" ></script>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="stylesheet" href="%PUBLIC_URL%/bootstrap.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/style.css" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body style="background-color: #efefef">
<div id="root"></div>
</body>
</html>
/src/App.js
I tried to demonstrate how I used css of bootstrap inside my reactjs component. You can also use className. Also take care while adding inline style. It must be object.
const Main = () => {
return(
<div class="d-flex justify-content-center" style={{width:"100vw", height:"100vh"}}>
<div>1</div>
<div class="flex-grow-1">2</div>
<div>
<button class="btn-primary p-2">Abe !</button>
</div>
</div>
)
}
export default Main;
If you get any error. Search for the error and try to resolve with help of google. Those error are common and can be easily fixed. You will learn alot from those errors.

Related

In my external css tag is working but another defined class is not working

In my external css tag is working but another defined class is not working.
I have defined two classes in my external CSS file, 1st one of them is working but 2nd one class is not working with external CSS. both classes work properly if I write these codes on my HTML page.
//code of external css page;
.container{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
align-items: center;
color: aliceblue;
}
.userCircle{
width: 100%;
margin-top:10px;
border: #fff 2px solide;
}
//code of the HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Profile</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/css/intlTelInput.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/intlTelInput.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!----------------Custome Links---------------->
<link rel="stylesheet" type="text/css" href="assets/css/profile.css">
<!----------------/Custome Links---------------->
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<h3>User Details</h3>
<div class="userCircle">
User Id : <?php echo $uid; ?>
</div>
</div>
</div>
</div>
</body>
</html>

Why aren't font and display working in my live server (html/css)?

I am following Tyler Potts' YouTube tutorial for making a nav bar. However, my nav bar isn't displaying as 'flex' and I also cannot edit my fonts.
My HTML:
`
<!DOCTYPE html>
<html lang="en">
<head>
<!--boiler plate-->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--tab-->
<title>Ryan Brooks</title>
<!--main.css-->
<link
href="https://fonts.googleapis.com/css2?family=Rubik+Wet+Paint&display=swap"
rel="stylesheet"
/>
<link: rel="stylesheet" href:"main.css" />
<!--favicon-->
<link rel="icon" href="images/favicon.png" type="image/png" />
<!--font-->
</head>
<body>
<!--nav bar-->
<nav>
<div class="container">
<h1>Ryan Brooks</h1>
<div class="menu">
Home
Projects
About
Contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<script src="main.js"></script>
</body>
</html>
`
:root {
--primary: #8c38ff;
--light: #eeeeee;
--dark: #212121;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Rubik Wet Paint", cursive;
}
.container {
max-width: 1280px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
`
What it looks like:
I tried adding the links from google fonts before my stylesheet link in the html, then adding the font after the asterisk { } section in the css. I was expecting the
text and <nav> bar content on my website to display in rubik font. Additionally, I was expecting my nav bar to display flex beside the
text, rather than beneath it. Thank you!
Be careful with syntax, here in your <head>, in your link to the css, you wrote href:"main.css" instead of href="main.css". You also put ':' right after the link tag which isn't required too.
if u use bootstrap you can add this on class="nav justify-content-center"

external style.css not working with bootstrap css

I am new in HTML and CSS. There are two buttons named 'Click me' and 'reset' and I was trying to add a border around them but the result is not updating according to my style.css file.
.flex-box-container-1 {
display: flex;
border: 1px solid black;
padding: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-1">
<h2>Challenge 1: Your age in Days</h2>
<div class="flex-box-container-1">
<div>
<button class="btn btn-primary">Click me</button>
</div>
<div>
<button class="btn btn-danger">reset</button>
</div>
It is working correctly. Make sure path of style.css is correct. Or simply add style in the html file itself. It will also reduce the number of files to be fetched from server.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<style>
.flex-box-container-1 {
display: flex;
border: 1px solid black;
padding: 10px;
}
</style>
<title>Challenges</title>
</head>
<body>
<div class="container-1">
<h2>Challenge 1: Your age in Days</h2>
<div class="flex-box-container-1">
<div>
<button class="btn btn-primary">Click me</button>
</div>
<div>
<button class="btn btn-danger">reset</button>
</div>
</div>
</div>
<!-- <script src="static/JS/script.js"></script> -->
</body>
</html>
It is working correctly. Make sure path of style.css is correct Sometimes your path is not hitting the proper directory user (#) symbol at the start of the path
. Or simply add style in the html file itself like Akshay said. It will also reduce the number of files to be fetched from server.
It worked correctly. check the file location.
If you Add more class to override bootstrap. That is add style to .container-1 .flex-box-container-1
.container-1 .flex-box-container-1 {
display: flex;
border: 1px solid black;
padding: 10px;
}
Using !important not good practice even when there are more ways.
It works for me in local file i tested compeletly.
Working Demo
.container-1 .flex-box-container-1 {
display: flex;
border: 1px solid black;
padding: 10px;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="static/style/style.css" />
<title>Challenges</title>
</head>
<body>
<div class="container-1">
<h2>Challenge 1: Your age in Days</h2>
<div class="flex-box-container-1">
<div>
<button class="btn btn-primary">Click me</button>
</div>
<div>
<button class="btn btn-danger">reset</button>
</div>
</div>
</div>
<script src="static/JS/script.js"></script>
</body>
</html>

react funcion <br> is not working in this <p>

I have search and tried much now but nothing works to get a new line here.
This is the React function
Really basic problem I guess because i'm quite new on this but please advice.
someone suggested to have this:
.new-line {
white-space: pre-line;
}
in the css but that did not work either . Can this be about using having a js file-extensions?
import React from "react";
import Badge from "../elements/Badge";
import Resume from "../../resume.json";
function AboutMe() {
return (
<section className="section has-background-link" id="aboutMe">
<div className="container has-text-centered">
<figure className="image container is-180x180">
<img
width="180px"
height="180px"
src={Resume.basics.picture}
alt={Resume.basics.name}
className="is-rounded"
onError={(e)=>{e.target.onerror = null; e.target.src=Resume.basics.x_pictureFallback}}
/>
</figure>
<p className="subtitle is-4 has-text-white has-text-weight-bold">
{Resume.basics.x_title}
</p>
<p className="subtitle is-5 has-text-white has-text-weight-light summary-text">
{"test Give me a new line now<br>yes I love it"}
</p>
<div className="container interests">
<div className="field is-grouped is-grouped-multiline has-text-centered">
{Resume.interests.map((value, index) => {
return (
<Badge key={index} text={value.name} faIcon={value.x_icon} />
);
})}
</div>
</div>
</div>
</section>
);
}
export default AboutMe;
I only use one css
html {
scroll-behavior: smooth;
}
.is-180x180{
height: 180px;
width: 180px;
}
.skill-list > li{
margin: 30px 0 0 0;
}
.has-bg-image {
background-image: url('../images/GretaThunberg collage2.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.bulma-image {
width: 200px;
}
.interests {
display: flex;
justify-content: center;
}
.summary-text {
margin-left: auto;
margin-right: auto;
max-width: 36em;
}
.skill-percentage {
float: right;
}
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=0"
/>
<meta name="theme-color" content="#3273DC" />
<link rel="canonical" href="https://josecoelho93.pt" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title></title>
<meta name="description" content="This is my personal website. You can find information about my experience, skills and articles I have written." />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
<link rel="stylesheet" href="./css/bulma-timeline.min.css">
<link rel="stylesheet" href="./css/styles.css">
<link rel="apple-touch-icon" sizes="180x180" href="./images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon/favicon-16x16.png">
<script defer src="https://use.fontawesome.com/releases/v5.4.0/js/all.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-134602535-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-134602535-1');
</script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Welcome to StackOverflow. It seems to me that this is not a React.js question, but an HTML/CSS one. I would recommend you try to focus searching for Newline in HTML / CSS instead of mentioning React, since it has nothing to do with this not working. I can assure you that the .js extension has nothing to do with it though :)
Also, try copying the HTML into separate .html file, without React, and debug from there if it is easier for you - you will also see nothing has changed and there is no effect from React whatsoever.
I would recommend experimenting with margin-bottom padding-bottom as well, just to give you some tips. If you want to, you could provide us with a JSFiddle so we can take a look at a live demo.
EDIT: After further inspection, there might be a JavaScript mistake I did not see at first
I would also try the following change:
<p>{"test Give me a new line now<br>yes I love it"}</p>
Change it to:
<p>test Give me a new line now<br />yes I love it</p>
You cannot pass HTML / React elements inside a string like that, since they won't be taken in consideration as anything else than string.
Without digging to deep, and piggy backing on Antonio's answer. You can isolate the problem with a console.log statement in your browser:
console.log("test Give me a new line now\nyes I love it")
What is being down is you need to replace the tag because you are in a sanitized text string and replace it with a newline \n character.
Depending on the template engine there may be ways to inject HTML into the text string but it seems like a newline is all you are after.
try using back tick...
It is not ideal but will work fine

working with html and javascript and changing the properties of html document but this is not working in my case?

here I am trying to change the image source property with the help of javascript but it is not working my case how can I change this .some one suggest me change in code.so that is can work in my case.
this is the CSS file for formatting the HTML code.
here I am using both logos from the internet.
also changing the background and background is changed but imaged is not changed.
function hello() {
console.log(document.getElementsByTagName("img").src);
document.getElementsByTagName("img").src =
"https://www.facebook.com/images/fb_icon_325x325.png";
document.body.style.background = "red";
}
h2 {
text-align: center;
}
body {
margin: auto;
padding: 5px;
}
#maincontent {
text-align: center;
}
.btn {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="door.css" />
<script src="main.js"></script>
<title>Door</title>
</head>
<body>
<h2 text-align="center">Open The Door</h2>
<div id="maincontent">
<img
src="https://cfcdnpull-creativefreedoml.netdna-ssl.com/wp-content/uploads/2017/06/Twitter-logo-2012.png"
id="hero"
width="400px"
height="600px"
/>
</div>
<div class="btn">
<button id="workbtn" onclick="hello();">Open Door</button>
</div>
</body>
</html>
Get the elements id instead. document.getElementById("hero").src = "https://www.facebook.com/images/fb_icon_325x325.png";
This way you are specific in which element you are trying to get. Because you using a tag, you need to specify which child of the tag you are getting.
could use document.getElementsByTagName("img").item(0); or document.getElementsByTagName("img")[0] or be more specific and get it by its id.
The [0] is the first occurrence of the tag on the page, numerical increments of items in code start with 0, if there were two, the key would be [1].
h2 {
text-align: center;
}
body {
margin: auto;
padding: 5px;
}
#maincontent {
text-align: center;
}
.btn {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="door.css" />
<script src="main.js"></script>
<title>Door</title>
</head>
<body>
<h2 text-align="center">Open The Door</h2>
<div id="maincontent">
<img
src="https://cfcdnpull-creativefreedoml.netdna-ssl.com/wp-content/uploads/2017/06/Twitter-logo-2012.png"
id="hero"
width="400px"
height="600px"
/>
</div>
<div class="btn">
<button id="workbtn" onclick="hello();">Open Door</button>
</div>
<script>
function hello() {
document.getElementById("hero").src =
"https://www.facebook.com/images/fb_icon_325x325.png";
document.body.style.background = "red";
}
</script>
</body>
</html>
The error was that getelementsbyTagName returns an HTMLCollection list which is an array-like object.
Thus if you want to access the element , you have to use the arr[0] style.
function hello() {
console.log(document.getElementsByTagName("img")[0].src);
document.getElementsByTagName("img")[0].src =
"https://www.facebook.com/images/fb_icon_325x325.png";
document.body.style.background = "red";
}
Code
h2 {
text-align: center;
}
body {
margin: auto;
padding: 5px;
}
#maincontent {
text-align: center;
}
.btn {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="door.css" />
<script src="main.js"></script>
<title>Door</title>
</head>
<head>
</head>
<body>
<h2 text-align="center">Open The Door</h2>
<div id="maincontent">
<img
src="https://cfcdnpull-creativefreedoml.netdna-ssl.com/wp-content/uploads/2017/06/Twitter-logo-2012.png"
id="hero"
width="400px"
height="600px"
/>
</div>
<div class="btn">
<button id="workbtn" onclick="hello();">Open Door</button>
</div>
<script>
function hello() {
console.log(document.getElementsByTagName("img")[0].src);
document.getElementsByTagName("img")[0].src =
"https://www.facebook.com/images/fb_icon_325x325.png";
document.body.style.background = "red";
}
</script>
</body>
</html>