Question: hey, i have typed a simple javascript console.log(‘Hello world’), but i dont know where i will get output when i click on run button.
Repl link/Link to where the bug appears:
Screenshots, links, or other helpful context:
console.log('Happy Independence Day')
Hey @KhajaMoinuddin2 welcome to the forums!
What kind of Repl are you using? If you are using Node when you click the Run button it will run your code in the Console. If it’s a HTML Repl then you won’t be able to see the JS run it will show the HMTL and CSS in the Webview. Hope this helps!
hey i don’t know much about it, but i am doing a beginner course from youtube from clever programmer - JavaScript Course. i am writing the code in yourPlayground.js. other than this i don’t know anything. if you help it will be grateful.
@KhajaMoinuddin2 oh I know now. If you haven’t all ready go to the .replit file and go to the entrypoint and change that to your JS file name (i.e yourPlayGround.js). So it should look like this → entrypoint = “yourPlayGround.js”
link,
So it’s a Node.js repl?
where is .replit, in files it is not there
In the 3 dots at the Files sidebar, click ‘Show hidden files’.
@KhajaMoinuddin2 click the 3 dots next to Files and click Show Hidden Files and it should be there now.
yeah got it, .replit, i have opened, next ?
hey @SalladShooter , here is the .replit code in this it is not their,
hidden=[".config"]
# hosting is currently hardcoded for this language
# [hosting]
# route = "/"
# directory= "/"
[nix]
channel = "stable-21_11"
[languages.html]
pattern = "**/*.html"
[languages.html.languageServer]
start = ["vscode-html-language-server", "--stdio"]
[languages.html.languageServer.initializationOptions]
provideFormatter = true
[languages.html.languageServer.configuration.html]
customData = [ ]
autoCreateQuotes = true
autoClosingTags = true
mirrorCursorOnMatchingTag = false
[languages.html.languageServer.configuration.html.completion]
attributeDefaultValue = "doublequotes"
[languages.html.languageServer.configuration.html.format]
enable = true
wrapLineLength = 120
unformatted = "wbr"
contentUnformatted = "pre,code,textarea"
indentInnerHtml = false
preserveNewLines = true
indentHandlebars = false
endWithNewline = false
extraLiners = "head, body, /html"
wrapAttributes = "auto"
templating = false
unformattedContentDelimiter = ""
[languages.html.languageServer.configuration.html.suggest]
html5 = true
[languages.html.languageServer.configuration.html.validate]
scripts = true
styles = true
[languages.html.languageServer.configuration.html.hover]
documentation = true
references = true
[languages.html.languageServer.configuration.html.trace]
server = "off"
[languages.javascript]
pattern = "**/{*.js,*.jsx,*.ts,*.tsx,*.mjs,*.cjs}"
[languages.javascript.languageServer]
start = ["typescript-language-server", "--stdio"]
# TODO autocomplete relies on snippet support, which we don't advertise to LSP servers.
# For now CSS autocomplete will use built-in codemirror, which is not perfect but good enough
[languages.css]
pattern = "**/{*.less,*.scss,*.css}"
[languages.css.languageServer]
start = ["vscode-css-language-server", "--stdio"]
[languages.css.languageServer.configuration.css]
customData = [ ]
validate = true
[languages.css.languageServer.configuration.css.completion]
triggerPropertyValueCompletion = true
completePropertyWithSemicolon = true
[languages.css.languageServer.configuration.css.hover]
documentation = true
references = true
[languages.css.languageServer.configuration.css.lint]
# Configure linting
# ignore = don't show any warning or error
# warning = show yellow underline
# error = show red underline
argumentsInColorFunction = "error" # Invalid number of parameters
boxModel = "ignore" # Do not use width or height when using padding or border
compatibleVendorPrefixes = "ignore" # When using a vendor-specific prefix make sure to also include all other vendor-specific properties"
duplicateProperties = "warning" # Do not use duplicate style definitions
emptyRules = "warning" # Do not use empty rulesets
float = "ignore" # Avoid using 'float'. Floats lead to fragile CSS that is easy to break if one aspect of the layout changes.
fontFaceProperties = "warning" # @font-face rule must define 'src' and 'font-family' properties
hexColorLength = "error" # Hex colors must consist of three, four, six or eight hex numbers
idSelector = "ignore" # Selectors should not contain IDs because these rules are too tightly coupled with the HTML.
ieHack = "ignore" # IE hacks are only necessary when supporting IE7 and older
important = "ignore" # Avoid using !important. It is an indication that the specificity of the entire CSS has gotten out of control and needs to be refactored.
importStatement = "ignore" # Import statements do not load in parallel
propertyIgnoredDueToDisplay = "warning" # Property is ignored due to the display
universalSelector = "ignore" # The universal selector (*) is known to be slow
unknownAtRules = "warning" # Unknown at-rule
unknownProperties = "warning" # Unknown property.
validProperties = [ ] # add some properties that the linter doesn't know about
unknownVendorSpecificProperties = "ignore" # Unknown vendor specific property.
vendorPrefix = "warning" # When using a vendor-specific prefix also include the standard property
zeroUnits = "ignore" # No unit for zero needed
[languages.css.languageServer.configuration.css.trace]
server = "off"
[languages.css.languageServer.configuration.scss]
validate = true
[languages.css.languageServer.configuration.scss.completion]
triggerPropertyValueCompletion = true
completePropertyWithSemicolon = true
[languages.css.languageServer.configuration.scss.hover]
documentation = true
references = true
[languages.css.languageServer.configuration.scss.lint]
# Configure linting
# ignore = don't show any warning or error
# warning = show yellow underline
# error = show red underline
argumentsInColorFunction = "error" # Invalid number of parameters
boxModel = "ignore" # Do not use width or height when using padding or border
compatibleVendorPrefixes = "ignore" # When using a vendor-specific prefix make sure to also include all other vendor-specific properties"
duplicateProperties = "warning" # Do not use duplicate style definitions
emptyRules = "warning" # Do not use empty rulesets
float = "ignore" # Avoid using 'float'. Floats lead to fragile CSS that is easy to break if one aspect of the layout changes.
fontFaceProperties = "warning" # @font-face rule must define 'src' and 'font-family' properties
hexColorLength = "error" # Hex colors must consist of three, four, six or eight hex numbers
idSelector = "ignore" # Selectors should not contain IDs because these rules are too tightly coupled with the HTML.
ieHack = "ignore" # IE hacks are only necessary when supporting IE7 and older
important = "ignore" # Avoid using !important. It is an indication that the specificity of the entire CSS has gotten out of control and needs to be refactored.
importStatement = "ignore" # Import statements do not load in parallel
propertyIgnoredDueToDisplay = "warning" # Property is ignored due to the display
universalSelector = "ignore" # The universal selector (*) is known to be slow
unknownAtRules = "warning" # Unknown at-rule
unknownProperties = "warning" # Unknown property.
validProperties = [ ] # add some properties that the linter doesn't know about
unknownVendorSpecificProperties = "ignore" # Unknown vendor specific property.
vendorPrefix = "warning" # When using a vendor-specific prefix also include the standard property
zeroUnits = "ignore" # No unit for zero needed"
[languages.css.languageServer.configuration.less]
validate = true
[languages.css.languageServer.configuration.less.completion]
triggerPropertyValueCompletion = true
completePropertyWithSemicolon = true
[languages.css.languageServer.configuration.less.hover]
documentation = true
references = true
[languages.css.languageServer.configuration.less.lint]
# Configure linting
# ignore = don't show any warning or error
# warning = show yellow underline
# error = show red underline
argumentsInColorFunction = "error" # Invalid number of parameters
boxModel = "ignore" # Do not use width or height when using padding or border
compatibleVendorPrefixes = "ignore" # When using a vendor-specific prefix make sure to also include all other vendor-specific properties"
duplicateProperties = "warning" # Do not use duplicate style definitions
emptyRules = "warning" # Do not use empty rulesets
float = "ignore" # Avoid using 'float'. Floats lead to fragile CSS that is easy to break if one aspect of the layout changes.
fontFaceProperties = "warning" # @font-face rule must define 'src' and 'font-family' properties
hexColorLength = "error" # Hex colors must consist of three, four, six or eight hex numbers
idSelector = "ignore" # Selectors should not contain IDs because these rules are too tightly coupled with the HTML.
ieHack = "ignore" # IE hacks are only necessary when supporting IE7 and older
important = "ignore" # Avoid using !important. It is an indication that the specificity of the entire CSS has gotten out of control and needs to be refactored.
importStatement = "ignore" # Import statements do not load in parallel
propertyIgnoredDueToDisplay = "warning" # Property is ignored due to the display
universalSelector = "ignore" # The universal selector (*) is known to be slow
unknownAtRules = "warning" # Unknown at-rule
unknownProperties = "warning" # Unknown property.
validProperties = [ ] # add some properties that the linter doesn't know about
unknownVendorSpecificProperties = "ignore" # Unknown vendor specific property.
vendorPrefix = "warning" # When using a vendor-specific prefix also include the standard property
zeroUnits = "ignore" # No unit for zero needed"
[auth]
pageEnabled = true
buttonEnabled = false
how to use node.js and move js file ?
@KhajaMoinuddin2 make a new Repl and use the Node.js template. Copy and Paste your JS code into the new Repl.
but in the youtube video clever programmer is doing in the same repl, along with webview, and console.
if we make new repo can we copy all files in the new repl ?
@KhajaMoinuddin2 if you are doing console.log in a HTML Repl it won’t work. Does the video ever do HTML and CSS? If not just do a Node.js Repl. If it does just continue with the video.
the video also contain some projects, which will use html & css after javascript basics.
@KhajaMoinuddin2 if you are currently doing JS without doing any HTML stuff do it in a Node.js Repl if you feel like it. Otherwise continue on.
hey can i use template of html,css,js ?