Ways to implement pseudo classes to display title text upon button click

Is it possible for the user to input their name and have it appear on the screen once they click the save button? I am using Mantine design framework and want to utilize pseudo classes. However, styling two classes at once seems tricky in Mantine compared to regular CSS.

Currently, when holding down the mouse button, the save button disappears temporarily but then reappears. I would like it to stay hidden permanently. How can I achieve this without affecting the visibility of other elements?

I am experimenting with React components and styles to create this functionality. Any insights or suggestions would be greatly appreciated!

cssreactjssassmantine

Answer №2

Here is a simple code snippet that allows you to easily prompt the user for their name, display it on click, and then hide the input form:

// JavaScript code

form = document.getElementById("form");
showUsername = document.getElementById("showUsername");
form.style.display = "block";
showUsername.style.display = "none";
function setUsername() {
    username = document.getElementById("username").value;
    form.style.display = "none";
    showUsername.style.display = "block";
    showUsername.innerHTML = username;
}
<!-- HTML code: -->
<div id="form">
<input type="text" placeholder="Enter your name here..." size="50" id="username">
<button onclick="setUsername()">Set Username</button>
</div>
<p id="showUsername"></p>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Whenever I try to include something within the `componentWillUnmount` function,

I'm currently learning React on my own. I've been trying to save session data in my componentWillUnmount method. However, when I add code inside componentWillUnmount, nothing seems to happen. I tried debugging by adding console logs and debugger ...

javascripthtmlreactjsreduxmaterial-ui

Update the background image URL by setting it as the value of an input field

There are three elements in play here: an input field, a span element, and a div with a background image property. <span>Go</span><input id="ImageUrl"/> <div id="Image"></div> I am working on a script where when a user ente ...

jquerycssclickattr

Background Patterns on Webpages

My website has a lovely gradient background on the html tag in css, while the body tag showcases a seamless pattern repeating on both the x and y axes. Everything was looking great until I checked the website on an iPad/iPhone in portrait mode, where the ...

javascriptjqueryhtmlcssweb

I am attempting to center an image on a webpage while disregarding the margins set on the

Bar.html: <!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="customStyle.css" /> </head> <body> The text formatting is spot on. Unfortunately, the following image should be centered, but it's off ...

ioscsswebkitblockcentering

Populate the div with an image that stretches to the full height

I'm facing an issue with my website's front page design, where a div is divided into two sections using the Twitter Bootstrap grid system. When the second grid (span9) is taller than the first (span3), the image perfectly fills up the span9 area ...

htmlcsstwitter-bootstrap

Incorporating an additional table dynamically based on height considerations – can you provide visuals as guidance?

The visual representation of my question far surpasses my verbal explanation. My intention is to insert a new table once the height of the previous table exceeds a specific HEIGHT limit, not a certain number of rows. This project does not involve creat ...

javascriptphpjquerycssasp.net

What is the best way to place a parent div above its child element?

I'm currently dealing with a container div styled with background-color: red;. This container has around 12 children, and the last child is set with background-color: blue;. My goal was to position the container on top of the child with the blue backg ...

htmlcssz-index

How can I achieve a partial match for an object property in a JavaScript loop

How can I reformat this array of objects const arr = [{ my_first_name_1: { value: 'jane' }, my_last_name_1: { value: 'anderson' } }, { my_first_name_2: { value: 'alex' }, my_last_name_2: { value ...

javascriptarraysnode.jsreactjsecmascript-6

Is it just me, or does `position: fixed;` not actually fix the element to the top?

I'm experiencing an issue where the element isn't fixed to the top of the page, despite using the position: fixed; property. I've tried several solutions including: Setting a z-index of 9999 Wrapping all elements in a single container (.fi ...

htmlcss

Issue with callback function not triggering after comment deletion in REACT

Although I am successfully able to delete the comment, I am facing an issue where the callback function is not being invoked. My suspicion is that it might be related to how I pass multiple arguments to the function, but I cannot confirm this. Below is th ...

javascriptnode.jsmongodbreactjsexpress

Passing an event from onSubmit in React without using lambdas

Within our current project, the tslint rule jsx-no-lambda is in place. When attempting to capture event from onSubmit, this is how I typically write my code: public handleLogin = (event: React.FormEvent<HTMLFormElement>) => { event.preventDe ...

javascriptreactjstypescripteslinttslint

What are some solutions for resolving differences in the display of pseudo elements between Macbooks and Windows desktops?

Greetings! I successfully converted an XD file to HTML and CSS code. I tested it on my Windows PC, but I haven't had the chance to test it on a Macbook yet. Details: I implemented a button with a pseudo element to show a right arrow on the right side ...

htmlcss

Tips for iterating over the DOM in React and toggling the corresponding class when an ID is clicked

I'm currently transitioning from jQuery to React and I need assistance with the following code snippet. I am trying to figure out how to iterate through my menu items, and when an element with the id #vans-by-manufacturer is clicked, locate an element ...

javascriptreactjs

What might be causing the overflow of my page width by my navbar?

I am currently working on creating a product landing page for freecodecamp, and I'm facing some issues with my navbar - the first element I need to get right. Could you help me identify what's wrong with my code? Additionally, I would like to ad ...

htmlcssresponsive-design

What is the best way to adjust the maximum width of Reddit's embedded comment iframe?

Reddit provides a code that can be embedded to display their comments on a website, As an example: <div class="reddit-embed" data-embed-media="www.redditmedia.com" data-embed-parent="false" data-embed-live="false" data-embed-uuid="24a3e666-f855-4664 ...

javascripthtmlcssiframereddit

How to customize field appearance in Django authentication login view by adding a CSS class

I recently started working with Django and came across Django forms when using the django.contrib.auth.views.login view for user authentication. However, I'm struggling to figure out how to add a CSS class to the username and password fields. The doc ...

cssdjangodjango-formsdjango-templates

Is it true that mapStateToProps cannot access props from withRouter in react-router?

I'm currently experiencing an unusual issue with the HOC withRouter from react-router. It seems that the props are not being passed on to the mapStateToProps function. Am I missing something here? import React, { Component } from 'react'; i ...

reactjsreact-router

Identify the general type according to a boolean property for a React element

Currently, I am facing a scenario where I need to handle two different cases using the same component depending on a boolean value. The technologies I am working with include React, Typescript, and Formik. In one case, I have a simple select box where th ...

reactjstypescripttypescript-generics

The unexpected behavior of nesting in CSS class selectors

Here is a paragraph element I'm working with: <p class='big bold'>Some random text</p> I attempted to style it using the following code: p .big{ font-size:60px; } p .bold{ font-weight:bold; } Unfortunately, the stylin ...

htmlcsscss-selectors

Are there any permissions needed for DELETE requests in Django REST framework?

I need some clarification on this issue. I have created a react app that communicates with a Django Rest Framework (DRF). The app is completely private, meaning only authenticated users can access it. Currently, I am using TokenAuthentication for security ...

djangoreactjsauthenticationdjango-rest-frameworktoken