codepen

React.js Material-UI project not working on codepen although it's working locally

由 孤街浪徒 提交于 2021-02-08 08:19:18
问题 the following project is working locally (I built it using create-react-app) but when moved it to codepen it's not working and it's driving me crazy (it's giving me a vague error in the console Uncaught ReferenceError: require is not defined ), any help would be appreciated: https://codepen.io/bahax/pen/ExPzbgZ?editors=0010 here's the code as suggested by SOF editor: import {Paper, Typography} from 'material-ui/core'; let styles = { leftStyles : { marginTop: '1vh', marginLeft: '1vw', width:

Why does this SVG image have a height of 150px

由 六眼飞鱼酱① 提交于 2021-02-07 13:00:47
问题 Why is this SVG image displayed at 150px height inside this 500px container? Why this specific value? I found this weird behavior in both js bin and Codepen, so I think it is something to do with my code and not with the online editors. Note: a 700px div container results in the same thing. So the height of the parent doesn't matter. <div style="padding: 30px; background-color: yellow; height: 500px; width: 500px; "> <svg> <pattern id="basicPattern" x="10" y="10" width="40" height="40"

Codepen.io: can't do console.log() in d3.csv()

由 梦想与她 提交于 2021-01-29 10:35:13
问题 I am trying to read in csv data using d3 in codepen.io and it is not printing me the data, even though it is printing console.log('hello') outside the d3.csv() : d3.csv("http://learnjsdata.com/data/expenses.csv", function(data) { console.log(data) }) I added d3 cdn of course. Whats wrong with codepen.io ? How to make it working? In the debug mode I see that codepen.io does not like that the expenses.csv is loaded over http . 回答1: I think it depends on the version of d3 you're using. In d3 v6,

How to reload a web page on CodePen full page view by clicking a button

由 試著忘記壹切 提交于 2019-12-13 08:17:39
问题 $("#quoteButton").on("click", function() { location.reload(); }); I worked on a 'Random Quote Machine' from Free Code Camp web site via NetBeans IDE 8.2 and this code works well, but when I paste it on CodePen for some reason it doesn't work on CodePen full page view. Is there a way that I can make a page reload when I click on a button on CodePen full page view anyway? In Debug mode view on CodePen it's working. Here's a link to my CodePen: https://codepen.io/NemStep/pen/pdmowz 回答1: This is

Why does this CSS work on Codepen but not directly in browser?

由 て烟熏妆下的殇ゞ 提交于 2019-12-13 05:09:38
问题 I'm trying to implement a CSS-only modal box with animation onto my website. It works perfectly on this Codepen I found: http://codepen.io/petebot/pen/DBvKj But I can't test or customize this code on my website because it doesn't work on an HTML page. What am I missing here? Here's the HTML page: <html> <head> <title></title> <style> @import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz); .transition (@time: .5s, @range: all, @ease: ease-out) { -moz-transition: @range @time

Vue2 watch Set Not Working

由 ▼魔方 西西 提交于 2019-12-11 04:35:08
问题 I have a simple Vue app that is supposed to add a number to a Set when you click the "Add to Set" button -- https://codepen.io/jerryji/pen/mKqNvm?editors=1011 <div id="app"> <input type="number" placeholder="enter a number" v-model="n"> <button type="button" @click.prevent="addToSet()">Add to Set</button> </div> new Vue({ el: "#app", data: { n: null, nSet: new Set() }, methods: { addToSet: function() { this.nSet.add(this.n); console.log(this.n + ' added to Set'); } }, watch: { nSet: function
订阅 codepen